Vscode中点击自动eslint格式化和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__
共有 0 条评论