公司线上推广,seo双标题软件,上海到北京的机票,哪里有网站开发设计文章目录 前言Prettier第一步#xff1a;下载依赖#xff08;团队合作#xff09;或下载插件#xff08;独立开发#xff09;第二步#xff1a;添加.prettierrc.json文件**以下是我使用的****配置规则** 第三步#xff1a;添加.prettierignore文件**以下是我常用的****配… 文章目录 前言Prettier第一步下载依赖团队合作或下载插件独立开发第二步添加.prettierrc.json文件**以下是我使用的****配置规则** 第三步添加.prettierignore文件**以下是我常用的****配置规则** 总结Prettier VSCode中setting设置常见的setting设置配置解释1. 编辑器配置 (editor 部分)2. 保存时格式化的配置 (editor.codeActionsOnSave)3. 静默 ESLint 样式规则 (eslint.rules.customizations)4. 文件配置 (files 部分)5. ESLint 配置 (eslint 部分)6. 搜索和隐藏文件配置 (files.exclude 和 search.exclude 部分)7.清爽界面 结尾 前言 大家好上一篇一文读懂 系列的文章中我们介绍了前端的代码格式化校验工具ESLient。代码格式是进行自动校验了但你还要一个个的微调很麻烦不是吗 本文介绍和ESLient配合使用的Prettier实现编译器自动将代码格式化。 同时也介绍VsCode的 setting设置分享我开发时常用的配置。 一文读懂 ESLint配置 一文读懂 ESLint配置
Prettier Prettier可以通过JSON 、YAML 、JavaScript 等方式来进行配置。其作用就是自动统一代码风格例如缩进、单/双引号、行尾逗号等在本文将使用json进行配置。
第一步下载依赖团队合作或下载插件独立开发
如果你不是一个人而是一个团队开发一个项目这个时候就要给你的项目添加Prettier的相关依赖如果你只是个人开发那么可以不用添加这个依赖直接到VScode中下载相关插件就可以了两者都会影响到项目的代码自动格式化区别只是下载依赖那么项目自己自带自动格式化而不下载依赖本质上其实是 自己对编译器的私设
下载依赖
pnpm add -D prettier下载插件
Prettier没有安装的直接点击安装就可以了
第二步添加.prettierrc.json文件
.prettierrc.json文件的主要作用就是定义自动格式化的格式
以下是我使用的
{singleQuote: true,semi: false,printWidth: 100,trailingComma: all,endOfLine: crlf,quoteProps: as-needed,tabWidth: 2
}
配置规则
配置项取值解释示例singleQuotetrue启用单引号默认为 false。设置为 true 后字符串使用单引号而不是双引号。const message Hello, world!;semifalse禁用分号默认为 true。设置为 false 后不在行尾添加分号。const name JohnprintWidth100设定每行的最大字符数超过这个限制时会自动换行。默认为 80。一行代码超过 100 个字符时会自动换行trailingCommaall控制是否添加尾随逗号。可选值none不添加、es5在 ES5 支持的地方添加、all在所有可能的地方添加。const obj { name: John, age: 30, }endOfLinecrlf指定行尾符号。可选值lf换行符、crlf回车换行、cr回车、auto自动检测。Windows 系统使用 CRLFUnix 系统使用 LFquotePropsas-needed控制对象属性名是否加引号。可选值as-needed需要时加引号、consistent所有属性名加引号、preserve保持原样。{ name: John, age: 30 }as-needed 时age 没有引号tabWidth2指定缩进的空格数默认为 2。代码缩进为 2 个空格
第三步添加.prettierignore文件
prettierignore文件的作用就是指定哪些文件需要被格式化哪些不需要
以下是我常用的
docs
dist
public
node_modules.versionrc
auto-imports.d.ts
components.d.ts**/dist/**
**/public/**
**/docs/**
**/node_modules/**
**/.versionrc/**
**/components.d.ts/**
**/auto-imports.d.ts/**types/**/*
配置规则
规则描述示例/path/to/file忽略指定的文件路径config/settings.json 忽略 config 目录下的 settings.json 文件/path/to/directory/忽略指定的目录及其所有子内容dist/ 忽略 dist 目录及其所有文件和子目录*.extension忽略特定文件扩展名的所有文件*.log 忽略所有 .log 文件**/directory/忽略所有子目录中与指定目录名匹配的内容**/build/ 忽略所有子目录中的 build 目录directory/file.*忽略指定目录下匹配的所有文件类型src/**/*.test.js 忽略 src 目录下所有 .test.js 文件!pattern使用 ! 进行反向匹配不忽略特定文件或目录!important.js 表示不忽略 important.js 文件/node_modules/通常用于忽略第三方依赖目录node_modules/ 忽略所有依赖/dist/忽略打包输出目录dist/ 忽略构建生成的文件path/**/file忽略路径中所有子目录下匹配的文件src/**/test.js 忽略 src 中所有子目录下的 test.js 文件
总结Prettier 如图通过安装插件、依赖。然后再项目的外面的位置添加这两个文件就能使用Prettier啦。但是光有Prettier还不够因此我们接下来需要在vscode中的setting设置使用Prettier为自动格式化工具。
VSCode中setting设置
从字面意思来看也能知道setting的作用就是个性化你的VSCode而且在项目中有一个setting设置那么所有人都会使用统一个VSCode设置进行开发。包括但不限于文件检索、字体大小格式化等。
常见的setting设置 下面是我的vscode中常用的设置我接下来会一一进行讲解
{// Editoreditor.cursorSmoothCaretAnimation: on,editor.guides.bracketPairs: active,editor.tabSize: 2,terminal.integrated.fontSize: 16,editor.fontFamily: FiraCode Nerd Font, Consolas, Courier New, monospace,editor.hover.sticky: true,explorer.confirmDelete: false,editor.formatOnPaste: false,editor.autoClosingBrackets: always,editor.defaultFormatter: esbenp.prettier-vscode,files.eol: \r\n,files.simpleDialog.enable: true,// 保存时格式化editor.codeActionsOnSave: {source.fixAll: never,source.fixAll.stylelint: explicit,source.fixAll.eslint: explicit,source.fixAll.prettier: always},eslint.useFlatConfig: true,// Silent the stylistic rules in you IDE, but still auto fix themeslint.rules.customizations: [{ rule: styles/*, severity: off },{ rule: *-indent, severity: off },{ rule: *-spacing, severity: off },{ rule: *-spaces, severity: off },{ rule: *-order, severity: off },{ rule: *-dangle, severity: off },{ rule: *-newline, severity: off },{ rule: *quotes, severity: off },{ rule: *semi, severity: off }],// Enable eslint for all supported languageseslint.validate: [javascript,javascriptreact,typescript,typescriptreact,vue,html,markdown,json,jsonc,yaml],// 文件格式化配置[json]: {editor.defaultFormatter: esbenp.prettier-vscode},// 配置语言的文件关联files.associations: {pages.json: jsonc, // pages.json 可以写注释manifest.json: jsonc // manifest.json 可以写注释},// 隐藏文件净化工作区可见文件files.exclude: {// **/.git: true,// **/.svn: true,// **/.hg: true,// **/CVS: true,// **/.DS_Store: true,// **/Thumbs.db: true,// .vite-cache: true,// .npmrc: true,// .stylelintignore: true,// package-lock.json: true,// config/vite.config.js.*: true,// src/vite-env.d.ts: true,// shims-uni.d.ts: true,// **/shime-uni.d.ts: true,// **/env.d.ts: true,// vite.config.ts.timestamp-*: true,// pnpm-lock.yaml: true},// 搜索时排除文件search.exclude: {**/dist: true,**/public: true,**/.git: true,**/.svn: true,**/.hg: true,**/CVS: true,**/.DS_Store: true,**/auto-imports.d.ts: true,config/vite.config.js.*: true,**/components.d.ts: true,**/node_modules: true,**/Thumbs.db: true,.vite-cache: true,.eslintignore: true,.stylelintignore: true,.prettierignore: true,package-lock.json: true,.editorconfig: true,.gitignore: true}
}
配置解释
1. 编辑器配置 (editor 部分) // Editoreditor.cursorSmoothCaretAnimation: on,editor.guides.bracketPairs: active,editor.tabSize: 2,terminal.integrated.fontSize: 16,editor.fontFamily: FiraCode Nerd Font, Consolas, Courier New, monospace,editor.hover.sticky: true,explorer.confirmDelete: false,editor.formatOnPaste: false,editor.autoClosingBrackets: always,editor.defaultFormatter: esbenp.prettier-vscode,files.eol: \r\n,files.simpleDialog.enable: true,
设置项值描述editor.cursorSmoothCaretAnimationon启用光标的平滑动画使光标移动时更加顺滑。editor.guides.bracketPairsactive高亮匹配的括号对active 表示仅高亮当前活动的括号对。editor.tabSize2设置 Tab 键的缩进空格数为 2。terminal.integrated.fontSize16设置 VSCode 集成终端的字体大小为 16。editor.fontFamilyFiraCode Nerd Font, Consolas, Courier New, monospace设置编辑器使用的字体系列优先使用 FiraCode Nerd Font。editor.hover.stickytrue使得代码提示信息在鼠标悬停时不自动消失。explorer.confirmDeletefalse禁用删除文件时的确认提示对话框。editor.formatOnPastefalse禁用粘贴内容时自动格式化。editor.autoClosingBracketsalways设置自动补全括号功能始终开启。editor.defaultFormatteresbenp.prettier-vscode指定使用 Prettier 扩展作为默认的代码格式化工具。
这部分有一部分是界面美化个人使用体验良好推荐按照我的设置
2. 保存时格式化的配置 (editor.codeActionsOnSave) // 保存时格式化editor.codeActionsOnSave: {source.fixAll: never,source.fixAll.stylelint: explicit,source.fixAll.eslint: explicit,source.fixAll.prettier: always},
设置项值描述source.fixAllnever保存时不应用任何自动修复操作。source.fixAll.stylelintexplicit保存时仅在显式请求时应用 stylelint 的自动修复操作。source.fixAll.eslintexplicit保存时仅在显式请求时应用 eslint 的自动修复操作。source.fixAll.prettieralways保存时始终应用 prettier 的自动格式化。
3. 静默 ESLint 样式规则 (eslint.rules.customizations) // Silent the stylistic rules in you IDE, but still auto fix themeslint.rules.customizations: [{ rule: styles/*, severity: off },{ rule: *-indent, severity: off },{ rule: *-spacing, severity: off },{ rule: *-spaces, severity: off },{ rule: *-order, severity: off },{ rule: *-dangle, severity: off },{ rule: *-newline, severity: off },{ rule: *quotes, severity: off },{ rule: *semi, severity: off }],
规则严重级别描述styles/*off关闭所有与样式相关的规则如 stylelint但仍允许自动修复。*-indentoff关闭与缩进相关的规则。*-spacingoff关闭与间距相关的规则如 no-trailing-spaces。*-spacesoff关闭与空格相关的规则。*-orderoff关闭与代码顺序相关的规则如属性顺序。*-dangleoff关闭与尾随逗号相关的规则如 comma-dangle。*-newlineoff关闭与换行相关的规则如行尾换行。*quotesoff关闭与引号样式相关的规则如单引号与双引号的选择。*semioff关闭与分号相关的规则如是否强制分号。
4. 文件配置 (files 部分)
设置项值描述files.eol\r\n设置文件的行尾符号为 CRLF适用于 Windows。files.simpleDialog.enabletrue启用简单对话框模式替代默认的复杂对话框。files.associations{ pages.json: jsonc, manifest.json: jsonc }将 pages.json 和 manifest.json 文件关联为 jsonc 以支持注释。files.exclude{ ... }隐藏指定的文件和目录以保持工作区清洁。
5. ESLint 配置 (eslint 部分)
设置项值描述eslint.useFlatConfigtrue启用新的 Flat Config ESLint 配置模式。eslint.rules.customizations[ { rule: ..., severity: off }, ... ]关闭所有样式相关的 ESLint 规则但仍允许自动修复。eslint.validate[ javascript, typescript, ... ]配置 ESLint 验证的语言和文件类型如 JavaScript、TypeScript、Vue 等。
是的
6. 搜索和隐藏文件配置 (files.exclude 和 search.exclude 部分)
设置项值描述files.exclude{ ... }隐藏工作区中的指定文件和目录例如 .git、node_modules、package-lock.json 等。search.exclude{ ... }在搜索时排除指定的文件和目录例如 dist、public、node_modules、.git 等。
7.清爽界面 这部分就是 files.exclude中在文件配置那
结尾 vscode设置中比较经常使用的应该就是编译器、搜索方位、自动保存、隐藏文件等几个项了 有了ESLient自动校验格式和Prettier自动保存格式至此前端的项目开发再无后顾之忧开发效率大大提高项目代码规范良好。 你好,我是Qiuner. 为帮助别人少走弯路而写博客 这是我的 github https://github.com/Qiuner ⭐️ gitee https://gitee.com/Qiuner 如果本篇文章帮到了你 不妨点个赞吧~ 我会很高兴的 (^ ~ ^) 想看更多 那就点个关注吧 我会尽力带来有趣的内容 代码都在github或gitee上可以去上面自行下载 如果你遇到了问题自己没法解决可以去我掘金评论区问。私信看不完CSDN评论区可能会漏看 掘金账号 https://juejin.cn/user/1942157160101860 掘金账号 本人提供开发、代码讲解等服务。有意可点击文末微信号联系 更多专栏订阅: 一图读懂系列 一文读懂系列 ⚽ Uniapp 持续更新 Vue项目实战 JavaWeb 设计模式 计算机网络 人生经验 软件测试 掘金账号 CSDN账号 感谢订阅专栏 三连文章
