当前位置:   article > 正文

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

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文件图标显示,不同文件不同图标

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/Monodyee/article/detail/697225
推荐阅读
相关标签
  

闽ICP备14008679号