Eslint+Prettier配置VSCode自动格式化代码_vscode eslint prettier 保存自动格式化

Eslint+Prettier配置VSCode自动格式化代码
1.插件准备
（1）至少安装以下插件
Vuter 提供vue代码片段、语法支持、代码高亮等，可以格式化html、标准css（有分号 、大括号的那种）、标准js（有分号 、双引号的那种）、vue文件
ESlint检查javascript语法检查和代码规范，不包括css，html
（2）推荐安装以下插件，提高开发效率
Prettier - Code formatter 各种代码格式化，只关注格式化，并不具有eslint检查语法等能力，只关心格式化文件(最大长度、混合标签和空格、引用样式等)，包括JavaScript · Flow · TypeScript · CSS · SCSS · Less · JSX · Vue · GraphQL · JSON · Markdown
2.VSCode自动化配置
通过eslint配置代码校验+本地配置prettier插件进行整个项目的格式化

（1）配置eslint
ESlint插件默认只提供代码风格检测功能，不能开启代码格式化功能，我们需要配置打开该功能，方便我们在开发时帮助我们格式化代码。

安装插件ESlint，打开扩展，搜索Eslint并安装

点击文件->首选项->设置，搜索eslint，勾选Format:Enable选项

打开VS Code配置文件setting.json，快捷键ctrl + shirt + p，搜索Settings(JSON)进入settings.json进行配置

添加如下选项

/先配置eslint/
“editor.codeActionsOnSave”: { // 每次保存的时候将代码按eslint格式进行修复
“source.fixAll.eslint”: true
},
如果要使用使用eslint格式化vue代码，需要先安装eslint和eslint-plugin-vue,如果有相关依赖就不用安装了

npm install eslint eslint-plugin-vue --save-dev
eslint --init
配置.eslintrc.js文件

 /*.eslintrc.js*/
 module.exports = {
     root: true, //默认是底层文件，不再向上（父文件）搜索
     env: {//运行环境
         browser: true,
         commonjs: true,
         node: true,
         es6: true,
     },
     extends: ["plugin:vue/recommended", "eslint:recommended"],//规则继承，引入eslint-plugin-vue插件，并开启essential类别中的一系列规则，eslint:recommended 启用一些列核心规则
     plugins: ["vue"],//插件【属性值可以省略包名的前缀eslint-plugin-】 eslint-plugin-vue帮助检测.vue里面的template和script代码
     parserOptions: {
         parser: "babel-eslint",//解析器
         sourceType: "module",//解析器配置文件，指定js代码来源，比如script标签引入
     },
     globals: {//全局变量
         document,
         navigator,
         window,
     },
     rules: {/*根据规范选择想要的规则，可官网查询相应规则https://eslint.org/docs/rules/*/
         indent: [2, "tab"],
         "vue/script-indent": [2, "tab", { baseIndent: 1 }],
         "vue/html-indent": [2, "tab", { baseIndent: 1 }],
         "no-undef": 2, //不可以有未声明的变量
         "no-redeclare": 2, //禁止重复声明变量
         semi: [2, "always"], //语句强制分号结尾
         "no-func-assign": 2, //禁止重复的函数声明
         // "spaced-comment": 2, //注释前要有空格
         "arrow-spacing": [2, { before: true, after: true }], //箭头前后括号
         "block-spacing": [2, "always"], // 块级作用域缩进
         "brace-style": [2, "1tbs", { allowSingleLine: true }], // 大括号风格，允许写在一行
         "comma-spacing": [2, { before: false, after: true }], // 逗号前后的空格
         "comma-style": [2, "last"], // 逗号风格，换行时在行首还是行尾
         "eol-last": 2, // 文件以单一的换行符结束
         eqeqeq: [2, "allow-null"], // 必须使用全等
         "generator-star-spacing": [2, { before: true, after: true }], // generate函数的前后空格
         indent: [2, 2, { SwitchCase: 1 }], // 缩进风格，switch缩进风格
         "jsx-quotes": [2, "prefer-single"], // jsx使用单引号
         "key-spacing": [2, { beforeColon: false, afterColon: true }], // 对象字面量中冒号添加后空格
         "keyword-spacing": [2, { before: true, after: true }], // 关键字前后空格
         "new-parens": 2, // new时必须加小括号
         "no-cond-assign": 2, // 禁止在条件表达式中使用赋值语句
         "no-dupe-args": 2, //函数参数不能重复
         "no-dupe-class-members": 2, //对象成员不能重复
         "no-duplicate-case": 2, //switch中的case标签不能重复
         "no-empty-pattern": 2, // 禁止空解构
         "no-eval": 2, //禁止使用eval
         "no-extra-parens": [2, "functions"], //禁止非必要的括号
         "no-func-assign": 2, //禁止重复的函数声明
         "no-invalid-regexp": 2, //禁止无效的正则表达式
         "no-irregular-whitespace": 2, //不能有不规则的空格
         "no-mixed-spaces-and-tabs": 2, //禁止混用tab和空格
         "no-multi-spaces": [2, { ignoreEOLComments: true }], //不能用多余的空格
         "no-multiple-empty-lines": [2, { max: 1 }], //空行最多不能超过2行
         "no-redeclare": 2, //禁止重复声明变量
         "no-regex-spaces": 2, //禁止在正则表达式字面量中使用多个空格
         "no-trailing-spaces": 2, //一行结束后面不要有空格
         "no-undef": 2, //不能有未定义的变量
         "no-whitespace-before-property": 2, // 对象键之前无空格
         "operator-linebreak": [2, "after", { overrides: { "?": "before", ":": "before" } }], //换行时运算符在行尾还是行首
         "padded-blocks": [2, "never"], //块语句内行首行尾不能空行
         "semi-spacing": [2, { before: false, after: true }], //分号前后空格
         "space-before-blocks": [2, "always"], //不以新行开始的块{前面需要有空格
         // "space-before-function-paren": [2, "always"], //函数定义时括号前面需要有空格
         "space-in-parens": [2, "never"], //小括号里面不需要有空格
         "space-infix-ops": 2, //中缀操作符周围需要有空格
         "space-unary-ops": [2, { words: true, nonwords: false }], //一元运算符的前/后要不要加空格
         "spaced-comment": [
             2,
             "always",
             { markers: ["global", "globals", "eslint", "eslint-disable", "*package", "!", ","] },
         ], //注释风格需要有空格
         "template-curly-spacing": [2, "never"], //模板中{}包裹的变量不需要空格
         "wrap-iife": [2, "any"], //立即执行函数表达式的小括号风格任意一种都可以
         "yield-star-spacing": [2, "both"], // generate 函数 yeild风格
         // "prefer-const": 2, //优先使用const
         "object-curly-spacing": [2, "always", { objectsInObjects: false }], //大括号内是否允许不必要的空格
     },
 };
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80

.eslintignore忽略文件

 //.eslintignore eslint忽略文件和git忽略文件同理 需要忽略项目里面不想走eslint的地方
 src/libs
 node_modules
 build/*.js
 src/assets
 src/utils/
 public
 dist
 .eslintrc.js
1
2
3
4
5
6
7
8
9

配置完成之后直接ctrl+s可以进行代码格式化，出错的地方会红色波浪线提示，或者ctrl+shift+f也可以进行代码格式化，但是运行项目时错误会造成项目跑不起来，如果只想红色波浪线提示错误，可以在vue.config.js里面加上

lintOnSave: false,//设置是否在开发环境下每次保存代码时都启用 eslint验证

（2）推荐安装[Prettier]
pretter没有对代码的质量进行检查的能力，只关注格式化，并不具有eslint检查语法等能力，其只会对代码风格按照指定的规范进行统一，避免一个项目中出现多种不同的代码风格

安装插件ESlint，打开扩展，搜索prettier，找到Prettier-Code formatter并安装

文件->首选项->设置进入设置界面，可以在搜索框中搜索要配置的文件进行勾选，但是只有基本配置项

settings.json配置如下，配置时候注意，Eslint和Prettier配置的规则要一致，否则会有冲突

 {        
   /*配置html css js的默认格式化程序*/  
  "editor.defaultFormatter": "esbenp.prettier-vscode",
   /*配置prettier*/
   "prettier.printWidth": 120, // 超过最大值换行
   "prettier.tabWidth": 4, // 缩进字节数
   "prettier.useTabs": true, // 缩进使用tab，不使用空格
   "prettier.semi": true, // 句尾添加分号
   "prettier.singleQuote": true, // 使用单引号代替双引号
   "prettier.proseWrap": "preserve", // 默认值。因为使用了一些折行敏感型的渲染器（如GitHub comment）而按照markdown文本样式进行折行
   "prettier.arrowParens": "avoid", //  (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid：省略括号
   "prettier.bracketSpacing": true, // 在对象，数组括号与文字之间加空格 "{ foo: bar }"
   "prettier.eslintIntegration": false, //不让prettier使用eslint的代码格式进行校验
   "prettier.jsxBracketSameLine": false, // 在jsx中把'>' 是否单独放一行
   "prettier.jsxSingleQuote": false, // 在jsx中使用单引号代替双引号
   "prettier.requireConfig": false, // Require a 'prettierconfig' to format prettier
   "prettier.stylelintIntegration": false, //不让prettier使用stylelint的代码格式进行校验
   "prettier.trailingComma": "es5", // 在对象或数组最后一个元素后面是否加逗号（在ES5中加尾逗号）
   "prettier.tslintIntegration": false, // 不让prettier使用tslint的代码格式进行校验
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

（3）其他配置
可以根据自己的喜好配置

 {
   /*配置编辑器 看个人习惯配置*/
   "editor.formatOnPaste": true,// 粘贴时格式化代码
   "editor.formatOnSave": true,// 每次保存的时候将代码按格式进行修复
   "editor.detectIndentation": false, // vscode默认启用了根据文件类型自动设置tabsize的选项
   "editor.tabSize": 2, // 重新设定tabsize,根据自己的习惯
   "editor.detectIndentation": false,
   "editor.insertSpaces": false,//tab时不插入空格
   "editor.formatOnType": true //开启自动格式化
     
    /*配置js*/
   "javascript.format.insertSpaceBeforeFunctionParenthesis": true,//  #让函数(名)和后面的括号之间加个空格
   "javascript.format.insertSpaceAfterConstructor": true,// 在构造函数和括号之间加空格
   "javascript.format.insertSpaceAfterOpeningAndBeforeClosingJsxExpressionBraces": true,
   "javascript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyParenthesis": true,
   "javascript.format.insertSpaceAfterOpeningAndBeforeClosingTemplateStringBraces": true,
   "javascript.format.insertSpaceAfterSemicolonInForStatements": true,
   "javascript.format.insertSpaceBeforeAndAfterBinaryOperators": true,// 在二进制运算符之后定义空间处理。
            
   /*css的一些校验 可加可不加*/
   "css.lint.float": "warning",
   "css.lint.idSelector": "warning",
   "css.lint.important": "warning",
   "css.lint.importStatement": "error",
   "css.lint.universalSelector": "warning",
   "less.lint.float": "warning",
   "scss.lint.idSelector": "warning",
   "scss.lint.hexColorLength": "warning",
   "scss.lint.float": "warning",
   "scss.lint.importStatement": "warning",
   "scss.lint.universalSelector": "warning",
 }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

配置完成之后普通html、css、js都可以格式化，普通文件ctrl+shift+f走prettier ，当然也可以走Eslint，右键可以选择以什么方式格式化文档。

3.其他插件
1.Trailing Spaces 尾部空格删除插件，高亮空格，并提供了一键删除。

2.Code Spell Checker拼写检查

3.Color Highlight颜色高亮

4.Import Cost依赖包大小提示

5.Bracket Pair Colorizer 2括号对齐，可以改变括号相应的颜色方便找到匹配括号

6.vscode-icon文件图标显示，不同文件不同图标