Vue项目中ESLint配置(VScode)
1.VScode的配置格式化代码
1.1下载eslint插件
1.2配置setting.json
打开左上角文件-首选项-设置,在设置中搜索eslint,点击并翻页到最下面,点击setting.json进行配置:
// 值设置为true时,每次保存的时候自动格式化;值设置为false时,代码格式化请按shift+alt+F
"editor.formatOnSave": false,
// 每次保存的时候将代码按eslint格式进行修复:
"eslint.validate":["javascript", "javascriptreact", "html", "vue"],
"eslint.enable": true,
"eslint.run":"onType",
"eslint.options":{"extensions":["js", "vue", ".jsx", ".tsx"]},
"editor.codeActionsOnSave":{"source.fixAll.eslint":true},
"eslint.format.enable": true,
"eslint.lintTask.enable": true,
1.3保存时按照eslint规则保存
鼠标右键->使用…格式化文档->配置默认格式程序->选择eslint
这样之后 alt+Shift+f之后就是按照eslint规则保存
2.安装ESlint
npm i eslint -D
3.安装ESlint相关依赖
npm i eslint-plugin-vue vue-eslint-parser -D
npm i babel-eslint -D
npm i eslint-config-standard-D
4.配置.eslintrc.js
ESLint配置的内容
环境:配置脚本在哪个环境下运行;
全局变量:脚本运行期间会访问额外的全局变量;
规则:配置代码的语法规则及规则的等级。
具体内容:
module.exports ={
//此项是用来告诉eslint找当前配置文件不能往父级查找
root: true,
//指定eslint继承的模板
extends: ["plugin:vue/essential", "@vue/standard"],
//此项指定环境的全局变量,下面的配置指定为浏览器环境
env: {
browser: true},
// 此项是用来提供插件的,插件名称省略了eslint-plugin-,下面这个配置是用来规范html的
plugins: ["vue"],
//指定javaScript语言类型和风格
parserOptions: {
parser: "babel-eslint"},
//规则https://www.wenjiangs.com/docs/eslint,vue规则:https://eslint.vuejs.org/rules/
// 主要有如下的设置规则,可以设置字符串也可以设置数字,两者效果一致
// "off" ->0 关闭规则
// "warn" ->1 开启警告规则
//"error" ->2 开启错误规则
rules: {
// 使用 === 替代 == allow-null允许null和undefined==[2, "allow-null"]
eqeqeq: 0,
// 双峰驼命名格式
camelcase: 0,
//要求或者禁止Yoda条件
yoda: 2,
// 行尾不使用分号
semi: 0,
//强制一致地使用反引号、双引号或单引号。
quotes: 2,
//强制函数中的变量在一起声明或分开声明
"one-var":2,
// 禁用 console
"no-console": process.env.NODE_ENV ==="production" ? "error":"off",
// 强制 generator 函数中 * 号周围使用一致的空格
"generator-star-spacing":"off",
// 禁用 debugger
"no-debugger": process.env.NODE_ENV ==="production" ? "error":"off",
// 禁止对象字面量中出现重复的 key
"no-dupe-keys":2,
// 函数参数不能重复
"no-dupe-args":2,
// 禁止重复的函数声明
"no-func-assign":2,
// 禁止重复的 case 标签
"no-duplicate-case":2,
// 禁用未声明的变量
"no-undef":1,
//禁止出现多个空格
"no-multi-spaces":2,
// 不允许标签与变量同名
"no-label-var":2,
//禁止tab
"no-tabs":1,
// 禁止 var 声明 与外层作用域的变量同名
"no-shadow":0,
// 禁止 if 语句中有 return 之后有 else"no-else-return":0,
// 禁止出现空函数.如果一个函数包含了一条注释,它将不会被认为有问题。
"no-empty-function":1,
// 禁止出现未使用过的变量
"no-unused-vars":1,
//禁止在返回语句中赋值
"no-return-assign":0,
// 禁用行尾空格
"no-trailing-spaces":2,
// 禁止修改 const 声明的变量
"no-const-assign":2,
// 禁止类成员中出现重复的名称
"no-dupe-class-members":2,
//禁止使用alert confirm promp
"no-alert": process.env.NODE_ENV ==="production" ? "error":"off",
//禁止多余的冒号
"no-extra-semi":2,
//禁止在条件中使用常量表达式
"no-constant-condition":2,
//空行最多不能超过2行
"no-multiple-empty-lines":[1, { max: 2}],
//禁止无用的表达式
"no-unused-expressions":1,
//禁用不必要的嵌套块
"no-lone-blocks":2,
//不允许使用逗号操作符
"no-sequences":2,
//禁止不规则的空白
"no-irregular-whitespace":2,
//函数括号前的空格
"space-before-function-paren":0,
//处理回调错误
"handle-callback-err":1,
//首选承诺拒绝错误
"prefer-promise-reject-errors":0,
//要求或禁止在注释前有空白 (space 或 tab)"spaced-comment":1,
//强制关键字周围空格的一致性
"keyword-spacing":1,
//强制在花括号中使用一致的空格
"object-curly-spacing":1,
// 控制逗号前后的空格
"comma-spacing":[2,
{
before: false,
after: true}],
// 要求或禁止 var 声明语句后有一行空行
"newline-after-var":0,
//强制使用一致的缩进
indent: 0,
// html 内 缩进
"vue/html-indent":0,
// 插值两端必须留一个空格
"vue/mustache-interpolation-spacing":0,
//强制每行的最大属性数
"vue/max-attributes-per-line":0,
//vue/属性顺序
"vue/attributes-order":0,
// 强制要求在对象字面量的属性中键和值之间使用一致的间距 "var obj = { "foo": 42 };""key-spacing":0,
// 禁止末尾逗号
"comma-dangle":0,
// 强制在块之前使用一致的空格 "function a() {}""space-before-blocks":0,
// 要求操作符周围有空格 "a ? b : c""space-infix-ops":2,
// "() => {};" // 强制箭头函数前后使用一致的空格
"arrow-spacing":2,
//插值中强制统一间距
//强制组件中的属性顺序
"vue/order-in-components":0,
//不允许字段名称重复
"vue/no-dupe-keys":2,
//多次引用同个包
"import/no-duplicates":2,
//执行有效v-for指令
"vue/valid-v-for":2,
//V-bind:key使用v-for指令要求
"vue/require-v-for-key":2,
//不允许解析错误<template>"vue/no-parsing-error":[2, {"x-invalid-end-tag":false}],
//强制执行自闭式
"vue/html-self-closing":"off",
//不允许计算属性中的副作用
"vue/no-side-effects-in-computed-properties":0,
//禁止 v-for 指令或范围属性的未使用变量定义
"vue/no-unused-vars":1,
//执行有效v-model指令
"vue/valid-v-model":2,
//强制执行有效的模板根
"vue/valid-template-root":2}};
5.package.json配置
lint:检验eslint规则
lint-fix:修复一般的eslint检验出的缺陷比如双引号变为单引号
"dev":"vue-cli-service serve --open",
"build":"vue-cli-service build",
"dev-eslint":"npm run lint vue-cli-service serve --open",
"build-eslint":"npm run lint vue-cli-service build",
"lint":"eslint --ext .js --ext .vue src",
"lint-fix":"eslint --fix --ext .js,.vue src"
6.Config.js配置
在vue.config.js中把lintOnSave改为true
7.扩展
关闭ESLint检查
多行关闭所有规则:
/* eslint-disable /
console.log(‘hello world’)
/ eslint-enable */
单行关闭所有规则:
console.log(‘hello world’) // eslint-disable-line
// eslint-disable-next-line
console.log(‘hello world’)
单行关闭指定规则:
console.log(‘hello world’) // eslint-disable-line no-alert
// eslint-disable-next-line no-alert
console.log(‘hello world’)
版权归原作者 今天代码敲了吗 所有, 如有侵权,请联系我们删除。