vue-create新建的一个没有eslint的初始化项目:
如何加上eslint?
1. 安装如下插件
@vue/cli-plugin-eslint // vue-cli 的 eslint 插件,装了这个就会去找eslint配置文件了
eslint
eslint-plugin-vue // eslint检查.vue文件的<template>和<script>
eslint-config-prettier // 禁用掉了一些不必要的以及和 Prettier 相冲突的 ESLint 规则
eslint-plugin-prettier // prettier 作为 ESLint 的规则来用,代码不符合 Prettier 的标准时,会报 ESLint 错误
eslint-config-standard // 一个js代码规范,比eslint的要全,下面三个是它的依赖
eslint-plugin-import
eslint-plugin-n
eslint-plugin-promise
@babel/eslint-parser // esLint的Babel解析器代替babel-eslint
2. 根目录创建.eslintrc.js
module.exports = {
root: true, // 将ESLint限制到一个特定的项目、目录,为true,则ESLint会停止在父级目录中寻找
env: {
// 启用特定环境的全局变量
browser: true, // 浏览器全局变量
node: true, // Node.js 全局变量和 Node.js 作用域
es6: true, // 启用除了modules以外的所有 EC6 特性,开启后会自动设置ecmaVersion为6
},
/** eslint:recommended(自动启用部分列核心功能) 、 eslint:all(启用当前Eslint全部核心功能) */
// vue-cli创建后的默认配置
// extends: ['plugin:vue/essential', 'eslint:recommended'],
// 没有用prettier,但是一旦vscode开启了,就会冲突报错
// extends: ["plugin:vue/recommended", "standard"],
// eslint规则+prettier风格组合
// extends: ["plugin:vue/recommended", "plugin:prettier/recommended"],
//
/**
eslint规则+standard+prettier风格组合
vscode一定要安装开启prettier,并且设为默认格式
且不符合prettier格式的不会报红,但保存会自动修复
*/
// extends: ["plugin:vue/recommended", "standard", "prettier"],
/**
最终方案:
eslint规则+standard+prettier风格组合
可不安装prettier,直接用eslint设为保存的格式
会报红且保存自动修复
*/
extends: [
"plugin:vue/recommended",
"standard",
"plugin:prettier/recommended",
],
parserOptions: {
parser: "@babel/eslint-parser", // 一个对Babel解析器的包装,使其能够与 ESLint 兼容
},
// 当访问当前文件内未定义的变量时,no-undef 规则将发出警告。
// 如果想在一个文件里使用全局变量,可以 ESLint 中定义这些全局变量。
globals: {
wx: "readonly",
WeixinJSBridge: "readonly",
},
};
3. vscode开启eslint
安装eslint插件,并且在settings.json中配置如下,保存会自动修复
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
}
4. 小插曲:是否需要加standard
因为一开始我的配置是这种,我觉得不需要加standard,经过考察,standard的校验更全面,还是加上。
extends: ["plugin:vue/recommended", "plugin:prettier/recommended"],
举个例子:
standard的规则中配置了 no-use-before-define 禁止定义前使用
no-eval 禁止使用eval
就拿着两个举例吧:
fn1(val) {
// 下面2行代码,如果配置eslint-config-standard就会报错,不配置就不会
eval("22");
alert(a);
},