最清晰的配置! VSCode + Eslint + Prettier 语法检查+代码格式化!
文章目录
- 前言
- 1.> prettier - 格式化代码
- 2.> eslint - js代码检查
- 3.> eslint + prettier
- 4.> ***** vscode 集成配置 eslint+prettier
前言
全文分为四部分, 分别为
prettier的使用,
eslint的使用,
prettier + eslint 的使用,
使用 vscode 的 prettier插件 来代替 prettier 格式化 , 然后再 eslint 只检测语法错误 ( 重点 ).
1.> prettier - 格式化代码
perttier 是专注于代码格式化的一个插件, 与其他不同的是, 他只有为数不多的可选项可以配置, 从而统一不同coder写的代码.
prettier 官方文档https://prettier.io/docs/en/options.html?spm=a2c4e.11153940.blogcont422690.11.5d0b5721zZ3CkZ
如下是翻译prettier控制属性的三篇博客
https://www.jianshu.com/p/4be58a69b20f
https://segmentfault.com/a/1190000012909159
https://juejin.im/post/5a7d70496fb9a063317c47f1
// 全局安装
npm install -g prettier
// 查看版本
prettier -v
// or
// 本地安装并添加依赖
npm install prettier --save-dev --save-exact
// 创建配置文件
echo {}> .prettierrc.json
// 使用的参数有很多, 具体 --help查看
prettier --hlep
但是不推荐使用上述命令来格式化, 比较麻烦, 在文本编辑器装插件一键格式化多香, 比如文末提到的vscode
配置文件类型有很多种 js / YAML 等都可以, 之间还有优先级, 下面贴出在 package.json 添加字段的方式来配置
附 prettier 配置文件 优先级由高到低顺序如下
package.json
.prettierrc YAML 或 JSON
.prettierrc.json
.prettierrc.yaml
.prettierrc.yml
.prettierrc.js
.prettier.config.js
.prettierrc.toml
"prettier": {
"printWidth": 80,
"tabWidth": 2,
"useTabs": false,
"singleQuote": true,
"jsxSingleQuote": true,
"quoteProps": "consistent",
"trailingComma": "all",
"bracketSpacing": true,
"jsxBracketSameLine": false,
"arrowParents": "always",
"semi": true,
"requirePragma": false,
"insertPragma": false,
"proseWrap": "preserve",
"htmlWhitespaceSensitivity": "ignore",
"endOfLine": "auto"
},
还可以针对不同文件设置不同格式化规则, 再此就不赘述了
此时, prettier 成功!
2.> eslint - js代码检查
tips:
因为我们只需要 eslint 做语法检查, 格式化交给 prettierj 就行了, 也好避免格式化的冲突!
所以, 不论是全局还是本地, 在 inint 的时候一定要选择第二项!
// 全局安装
npm install eslint -g
// 初始化, 最后会自己选择生成配置文件 ( 在此之前要确认有 package.json, 没有则 npm init 一下 )
eslint --init
// or
// 局部安装并添加开发依赖
npm install eslint --save-dev --save-exact
// 初始化, 最后会自己选择生成配置文件 ( 在此之前要确认有 package.json, 没有则 npm init 一下 )
.\node_modules\.bin\eslint --init
// 启动修复当前目录下所有文件
eslint . --fix
[eslint 官方中文文档https://cn.eslint.org/docs/user-guide/getting-started(https://cn.eslint.org/docs/user-guide/getting-started)
一篇很不错的讲解博客 https://juejin.im/post/5be237e36fb9a049fa0f3b6d
可以先参考一下讲解博客, 具体规则在自己对应官网文档进行配置
按照如上操作, 我是选择生成了加载优先等级最高的js类型, 所以就会在根目录生成 .eslintrc.js.
此时 eslint 成功!
附 eslint配置文件 优先级由高到低顺序如下
.eslintrc.js.eslintrc.yaml.eslintrc.yml.eslintrc.json.eslintrcpackage.json
3.> eslint + prettier
讲 eslint 与 prettier 全部本地安装成功后( 注意要想有提示就必须本地安装! 除非你想没保存次文件就打一下eslint命令! ),
在 eslint的配置文件中 rule 字段里 添加
"prettier/prettier": "error"
告诉 eslint 只要是 prettier 提示的全部抛错误, 这一步为可选项!
想要保存文件同时自动语检查和格式化代码, https://juejin.im/post/5b27a326e51d45588a7dac57 可以参考下这篇博文
因为我主要是用的 vscode, 并且设置了自动保存文件, 习惯了用 Alt+Shift+F 来手动格式化, 这个方法不适合
so, 这里就略过, 具体看重点部分通过 vscode 来实现
4.> ***** vscode 集成配置 eslint+prettier
好了, 终于到了重点了!
到此时, eslint 与 prettier 都差不多明白了
这里我们来配置下 vscode,
首先分别下载安装扩展 Eslint / Prettier / Vectur( vue语法增强 )
打开全局 settings.json, 按需要添加文末JSON
其中,
prettier 格式化, 格式和上文npm 安装的略有不同, 但是属性是一样的, 注释上附了中文翻译链接, 进去按需要自己配置prettier属性
eslint 会在保存时候启动检查并提示, 如图
vectur 参考如下json配置好了之后 在 vue组件 中也会检查并提示, 如图
// prettier 格式化配置
"javascript.format.placeOpenBraceOnNewLineForControlBlocks": false, // 函数左括号{是否换行
"javascript.format.insertSpaceBeforeFunctionParenthesis": true, // 让函数(名)和后面的括号之间加个空格
"prettier.printWidth": 80,
"prettier.tabWidth": 2,
"prettier.useTabs": false,
"prettier.singleQuote": true,
"prettier.jsxSingleQuote": true,
"prettier.quoteProps": "consistent",
"prettier.trailingComma": "all",
"prettier.bracketSpacing": true,
"prettier.jsxBracketSameLine": false,
"prettier.arrowParens": "always",
"prettier.semi": true,
"prettier.requirePragma": false,
"prettier.insertPragma": false,
"prettier.proseWrap": "preserve",
"prettier.htmlWhitespaceSensitivity": "ignore",
"prettier.endOfLine": "auto",
"prettier.vueIndentScriptAndStyle": true,
// https://prettier.io/docs/en/options.html 官方文档
// https://juejin.im/post/5a7d70496fb9a063317c47f1 中文翻译
// https://segmentfault.com/a/1190000012909159
// https://www.jianshu.com/p/4be58a69b20f
// ---------------------------------------------------
// vue vectur 配置
"vetur.format.options.tabSize": 2,
"vetur.format.options.useTabs": false,
"vetur.format.defaultFormatter.html": "prettier",
"vetur.format.defaultFormatter.less": "prettier",
"vetur.format.defaultFormatter.css": "prettier",
"vetur.format.defaultFormatter.js": "prettier",
"vetur.format.defaultFormatterOptions": {
"prettier": {
"semi": false, //不加分号
"singleQuote": true, //用单引号
"tabWidth": 2,
"printWidth": 80,
"bracketSpacing": true, // 数组属性：后跟一个空格
},
},
// ---------------------------------------------------
// ESLint 配置代码检查
"eslint.format.enable": false,
"eslint.alwaysShowStatus": false,
"eslint.quiet": false, // 忽略检查
"eslint.validate": [
"javascript",
"javascriptreact",
"typescript",
"typescriptreact",
"vue",
],
"eslint.run": "onSave",
"eslint.options": {
"extensions": [
".js",
".vue",
],
},
"editor.codeActionsOnSave": { // 启用 eslint 自动修复
"source.fixAll.eslint": true
}
// ---------------------------------------------------
最后再演示一遍, 使用vscode, 创建一个项目的完整操作!
md eslint-test
cd eslint-test
npm init
npm install prettier --save-dev --save-exact
.\node_modules\.bin\eslint --init
code .
大功告成, cheer!