Vscode中点击自动eslint格式化和prettier搭配

文章目录[隐藏]

• vscode自动格式化
  • 然后就是和prettier搭配使用

eslint规则只是限制我们在写代码时候的标准化，尤其是在团队开发中成员的代码一致性，如果大家都是自己的标准，那么写出的项目将没有办法进行阅读，不利于后期的二次开发

vscode自动格式化

而vscode写项目时候保存文件自动eslint格式化是在 文件 --> 首选项 -- > 设置中找到settings.json中进行设置，下面是代码块

添加这两句代码，就可以了

// 新版支持 // 语言标识符的数组，为此ESLint扩展应被激活，并应尝试验证文件。 "eslint.probe": [ "javascript", "javascriptreact", "vue-html", "vue", "html" ], // 保存时对运行的代码进行eslint规则自动修复 "editor.codeActionsOnSave": { "source.fixAll.eslint": true },

下面是我平常开发中使用到的vscode配置

{ // 项目颜色主题 "workbench.colorTheme": "Dracula", // 项目文件图标主题 "workbench.iconTheme": "material-icon-theme", // 每次保存的时候自动格式化 "editor.formatOnSave": true, // 可视区域内是否自动换行 "editor.wordWrap": "on", // 老版支持 // "eslint.autoFixOnSave": true, // 启用保存时自动修复,默认只支持.js文件 // "eslint.validate": [ // "javascript", // 用eslint的规则检测js文件 // "vue", // 用eslint规则检测vue文件 // "html", // 用eslint规则检测html文件 // ], // 新版支持 // 语言标识符的数组，为此ESLint扩展应被激活，并应尝试验证文件。 "eslint.probe": [ "javascript", "javascriptreact", "vue-html", "vue", "html" ], // 保存时对运行的代码进行eslint规则自动修复 "editor.codeActionsOnSave": { "source.fixAll.eslint": true, "source.fixAll.stylelint": true }, // 字体大小 "editor.fontSize": 16, // 设置字体 "editor.fontFamily": "Droid Sans Mono, Courier New, monospace, Droid Sans Fallback", // tab 一个制表符等于的空格数 "editor.tabSize": 4, // 控制编辑器是否显示内联颜色修饰器和颜色选取器 "editor.colorDecorators": true, // 控制编辑器是否启用了代码折叠 "editor.folding": true, // 代码行高，0自动计算，8作为倍数 "editor.lineHeight": 24, // 是否显示行号 "editor.lineNumbers": "on", // 控制编辑器是否自动格式化粘贴的内容，格式化程序要可用，并且针对文档中的某一范围进行格式化 "editor.formatOnPaste": true, // 控制是否在编辑器中显示CodeLens "diffEditor.codeLens": true, // 控制是否显示缩略图 "editor.minimap.enabled": true, // 控制自动保存未保存的编辑器文件，onFocusChange切换文件时保存，afterDelay操作代码之后保存，onWindowChange切换编辑器之后保存 "files.autoSave": "onFocusChange" }

vue项目中.eslintrc.js文件配置（仅个人使用）---这里的配置，是上面vscode配置执行的标准

module.exports = { root: true, env: { node: true, browser: true, commonjs: true, es6: true, amd: true, jquery: true }, extends: [ plugin:vue/vue3-essential, plugin:vue/base, @vue/standard, eslint:recommended ], parserOptions: { // 因为babel-eslint已官方弃用，所以这里注释或者删掉，不然会一直报错找不到模块‘babel-eslint’ // parser: "babel-eslint", sourceType: module }, rules: { // console判断 no-console: process.env.NODE_ENV === production ? warn : off, // debugger是否使用 no-debugger: process.env.NODE_ENV === production ? warn : off, // 禁用 alert、confirm 和 prompt no-alert: process.env.NODE_ENV === production ? warn : off, // 这条验证目前只知道可以去除pubilc里面的index.html的规则报错，具体意思不清楚 // 貌似关闭在模版中使用 eslint-disable-next-line 等注释 vue/comment-directive: off, // eslint规则子组件不能修改props值得问题 vue/no-mutating-props: off, // notab--忽略用于缩进的tab no-tabs: [error, { allowIndentationTabs: true }], // 方法名小括号之后没有空格 space-before-function-paren: off, // 禁止在条件表达式中使用赋值运算符 no-cond-assign: error, // 禁止与-0去比较 no-compare-neg-zero: error, // 禁止在循环中出现 await no-await-in-loop: error, // 强制 getter 函数中出现 return 语句 getter-return: error, // 强制 “for” 循环中更新子句的计数器朝着正确的方向移动 for-direction: error, // 禁止 function 定义中出现重名参数 no-dupe-args: error, // 禁止对象字面量中出现重复的 key no-dupe-keys: error, // 禁止出现重复的 case 标签 no-duplicate-case: error, // 禁止出现空语句块 no-empty: error, // 禁止对 catch 子句的参数重新赋值 no-ex-assign: error, // 禁止不必要的布尔转换 no-extra-boolean-cast: error, // 禁止不必要的括号 no-extra-parens: error, // 禁止不必要的分号 no-extra-semi: error, // 禁止对 function 声明重新赋值 no-func-assign: error, // 要求使用 === 和 !== eqeqeq: error, // 强制 typeof 表达式与有效的字符串进行比较 valid-typeof: error, // 要求使用 isNaN() 检查 NaN use-isnan: error, // 禁止出现空函数 no-empty-function: error, // 禁止使用空解构模式 no-empty-pattern: error, // 禁止在没有类型检查操作符的情况下与 null 进行比较 no-eq-null: error, // 禁止使用多个空格 no-multi-spaces: error, // 禁止使用多行字符串 no-multi-str: error, // 禁止多次声明同一变量 no-redeclare: error, // 禁止自我赋值 no-self-assign: error, // 禁止自身比较 no-self-compare: error, // 要求或禁止 var 声明中的初始化 init-declarations: [error, always], // 禁用未声明的变量，除非它们在 /*global */ 注释中被提到 no-undef: error, // 禁止将变量初始化为 undefined no-undef-init: error, // 禁止出现未使用过的变量 no-unused-vars: error, // 禁止在变量定义之前使用它们 no-use-before-define: error, // 是否允许非空数组里面有多余的空格 array-bracket-spacing: [error, never], // 要求箭头函数的参数使用圆括号 arrow-parens: error, // 强制驼峰法命名 camelcase: error, // this别名that consistent-this: [error, that], // 必须使用 if(){} 中的{} curly: [error, all], // 缩进风格 indent: [error, 2], // 要求在注释周围有空行 lines-around-comment: off, // 函数最多只能有3个参数 max-params: [off, 4], // 函数内最多有几个声明 max-statements: [off, 10], // 禁止在代码后使用内联注释 no-inline-comments: off, // 换行风格-强制使用一致的换行符风格 linebreak-style: [off, windows], // 禁止将全局对象当作函数进行调用 no-obj-calls: error, // 禁止对函数参数再赋值 no-param-reassign: error, // 不允许使用undefined变量 no-undefined: error, // 禁止使用令人困惑的多行表达式 no-unexpected-multiline: error, // 要求将变量声明放在它们作用域的顶部 vars-on-top: error } }

然后就是和prettier搭配使用

1.vscode搜索扩展工具prettier并安装

2.在项目中新建".prettierrc文件"，并添加规则，格式如下 { "semi": false, "singleQuote": true, "trailingComma": "none" }

3.在文件->首选项->设置中 搜索save找到Editor:Format On Save并勾选

完成这3步基本上就配置完成了，但是prettier和eslint本身会有冲突的地方，需要修改一些地方

1).prettier和eslint冲突问题解决：打开.eslintrc.js, 在rules规则下，添加代码 rules: { space-before-function-paren: off }

2).如果安装了多个代码格式化工具，那么在页面保存的时候，右键->使用...格式化文档，然后配置默认prettier格式化文件就行了

3).在打开项目->public->index.html或者.html的文件时，会在代码结构的末尾报错 vue/comment-directive: off, 解决办法：在.eslintrc.js文件中添加规则：

rules: { // 这条验证目前只知道可以去除pubilc里面的index.html的规则报错，具体意思不清楚 // 貌似关闭在模版中使用 eslint-disable-next-line 等注释 vue/comment-directive: off, }

4).在项目中，会遇到一个问题，子组件通过props获取到父组件的值，子组件通过v-modal修改，eslint报错的问题，解决办法：

rules: { // eslint规则子组件不能修改props值得问题 vue/no-mutating-props: off, }

__EOF__

本文作者： 与君别 本文链接： https://www.cnblogs.com/love920526/p/16741500.html 关于博主： 评论和私信会在第一时间回复。或者直接私信我。 版权声明： 本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！ 声援博主： 如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。