Eslint+Prettier配置VSCode自动格式化代码

ishangsf 2022年6月8日23:26:09IDE工具评论字数 6734阅读模式

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插件进行整个项目的格式化文章源自周顺峰个人空间-http://ishangsf.com/2022/06/76/

(1)配置eslint

ESlint插件默认只提供代码风格检测功能,不能开启代码格式化功能,我们需要配置打开该功能,方便我们在开发时帮助我们格式化代码。文章源自周顺峰个人空间-http://ishangsf.com/2022/06/76/

安装插件ESlint,打开扩展,搜索Eslint并安装文章源自周顺峰个人空间-http://ishangsf.com/2022/06/76/

Eslint+Prettier配置VSCode自动格式化代码

点击文件->首选项->设置,搜索eslint,勾选Format:Enable选项文章源自周顺峰个人空间-http://ishangsf.com/2022/06/76/

Eslint+Prettier配置VSCode自动格式化代码

打开VS Code配置文件setting.json,快捷键ctrl + shirt + p,搜索Settings(JSON)进入settings.json进行配置文章源自周顺峰个人空间-http://ishangsf.com/2022/06/76/

Eslint+Prettier配置VSCode自动格式化代码

添加如下选项文章源自周顺峰个人空间-http://ishangsf.com/2022/06/76/

  /*先配置eslint*/
   "editor.codeActionsOnSave": { // 每次保存的时候将代码按eslint格式进行修复
     "source.fixAll.eslint": true
   },

如果要使用使用eslint格式化vue代码,需要先安装eslint和eslint-plugin-vue,如果有相关依赖就不用安装了文章源自周顺峰个人空间-http://ishangsf.com/2022/06/76/

 npm install eslint eslint-plugin-vue --save-dev
 eslint --init   

配置.eslintrc.js文件文章源自周顺峰个人空间-http://ishangsf.com/2022/06/76/

 /*.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 }], //大括号内是否允许不必要的空格
     },
 };

.eslintignore忽略文件文章源自周顺峰个人空间-http://ishangsf.com/2022/06/76/

 //.eslintignore eslint忽略文件和git忽略文件同理 需要忽略项目里面不想走eslint的地方
 src/libs
 node_modules
 build/*.js
 src/assets
 src/utils/
 public
 dist
 .eslintrc.js

配置完成之后直接ctrl+s可以进行代码格式化,出错的地方会红色波浪线提示,或者ctrl+shift+f也可以进行代码格式化,但是运行项目时错误会造成项目跑不起来,如果只想红色波浪线提示错误,可以在vue.config.js里面加上文章源自周顺峰个人空间-http://ishangsf.com/2022/06/76/

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

(2)推荐安装[Prettier]

pretter没有对代码的质量进行检查的能力,只关注格式化,并不具有eslint检查语法等能力,其只会对代码风格按照指定的规范进行统一,避免一个项目中出现多种不同的代码风格文章源自周顺峰个人空间-http://ishangsf.com/2022/06/76/

安装插件ESlint,打开扩展,搜索prettier,找到Prettier-Code formatter并安装文章源自周顺峰个人空间-http://ishangsf.com/2022/06/76/

Eslint+Prettier配置VSCode自动格式化代码

文件->首选项->设置进入设置界面,可以在搜索框中搜索要配置的文件进行勾选,但是只有基本配置项文章源自周顺峰个人空间-http://ishangsf.com/2022/06/76/

Eslint+Prettier配置VSCode自动格式化代码

settings.json配置如下,配置时候注意,Eslint和Prettier配置的规则要一致,否则会有冲突文章源自周顺峰个人空间-http://ishangsf.com/2022/06/76/

 {        
   /*配置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的代码格式进行校验
    }

(3)其他配置

可以根据自己的喜好配置文章源自周顺峰个人空间-http://ishangsf.com/2022/06/76/

 {
   /*配置编辑器 看个人习惯配置*/
   "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",
 }

配置完成之后普通html、css、js都可以格式化,普通文件ctrl+shift+fprettier ,当然也可以走Eslint,右键可以选择以什么方式格式化文档。文章源自周顺峰个人空间-http://ishangsf.com/2022/06/76/

3.其他插件

1.Trailing Spaces 尾部空格删除插件,高亮空格,并提供了一键删除。文章源自周顺峰个人空间-http://ishangsf.com/2022/06/76/

2.Code Spell Checker拼写检查文章源自周顺峰个人空间-http://ishangsf.com/2022/06/76/

3.Color Highlight颜色高亮文章源自周顺峰个人空间-http://ishangsf.com/2022/06/76/

4.Import Cost依赖包大小提示文章源自周顺峰个人空间-http://ishangsf.com/2022/06/76/

5.Bracket Pair Colorizer 2括号对齐,可以改变括号相应的颜色方便找到匹配括号文章源自周顺峰个人空间-http://ishangsf.com/2022/06/76/

6.vscode-icon文件图标显示,不同文件不同图标文章源自周顺峰个人空间-http://ishangsf.com/2022/06/76/

  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 我的微信公众号
  • 我的微信公众号扫一扫
  • weinxin
ishangsf
  • 本文由 发表于 2022年6月8日23:26:09
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定