简介
前端项目,主要有两种选择ESLint
和TSLint
。TSLint
仅针对TS
代码,因此如果采用TSLint
规范TS
代码,JS
代码需要采用其他工具。而ESLint
不仅能规范js
代码,通过配置解析器,也能规范TS
代码。此外由于性能问题,TypeScript
官方决定全面采用ESLint
。
Eslint
的主要功能包含代码格式的校验,代码质量的校验,JS
规范,如用===而不是==判断相等、用驼峰命名变量而不是用下划线。而 Prettier
是美丽的意思,只是代码格式的校验(并格式化代码),不会对代码质量进行校验,如单行代码长度、tab 长度、空格、逗号表达式等问题。在实际项目中,eslint
可以检测出代码问题,并标红,但是并不会自动格式化,需要手动格式化,接入Prettier
并配置(需要分webstorm
和vscode
)可以进行自动化。但是需要考虑到的是,prettier
和eslint
的规则有可能冲突,因此需要考虑到当冲突时,需要解决冲突,以谁的标准为准,正常是以prettier
为准。
起步
如果是新的项目,用vue
官方的脚手架拉取项目时,在下面的步骤中选择Eslint+Prettier
就好了,我们可以发现,官方也是集成了Eslint+Prettier
的,因此还是比较靠谱的:
安装 Eslint 依赖
npm i -D eslint babel-eslint eslint-plugin-vue @vue/cli-plugin-eslint
eslint
:ESLint
的核心代码babel-eslint
:eslint
与babel
整合包eslint-plugin-vue
@vue/cli-plugin-eslint
:eslint
与vue
整合包
当然如果已经安装过了,就可以不用安装了。
配置 Eslint
在项目的根目录下,新建.eslintrc.js
文件,并将下面代码拷贝进去,具体规则看注释。或者看StandardJS 官方
// .eslintrc.js
module.exports = {
root: true,
parserOptions: {
// 定义ESLint的解析器
parser: "babel-eslint",
sourceType: "module",
},
// 指定代码的运行环境
env: {
browser: true,
node: true,
es6: true,
},
extends: [
//继承 vue 的标准特性
"plugin:vue/essential",
"eslint:recommended",
],
// 自定义eslint规则,严格按照StandardJS
rules: {
"vue/max-attributes-per-line": [
2,
{
singleline: 10,
multiline: {
max: 1,
allowFirstLine: false,
},
},
],
"vue/singleline-html-element-content-newline": "off",
"vue/multiline-html-element-content-newline": "off",
"vue/name-property-casing": ["error", "PascalCase"],
"vue/no-v-html": "off",
// 两个空格缩进
indent: [
2,
2,
{
SwitchCase: 1,
},
],
// 单引号
quotes: [
2,
"single",
{
avoidEscape: true,
allowTemplateLiterals: true,
},
],
// 未使用的变量
"no-unused-vars": [
2,
{
vars: "all",
args: "after-used",
},
],
// 关键字前后空格
"keyword-spacing": [
2,
{
before: true,
after: true,
},
],
// function关键字和函数名后面的空格
"space-before-function-paren": [2, "never"],
// 除了null,其他用===而不是==
eqeqeq: ["error", "always", { null: "ignore" }],
// 字符串拼接操作符直接用空格
"space-infix-ops": 2,
// 逗号前面不用空格,逗号后面用空格
"comma-spacing": [
2,
{
before: false,
after: true,
},
],
// else必须和反花括号一行
"brace-style": [
2,
"1tbs",
{
allowSingleLine: true,
},
],
// 多行 if 语句的的括号不能省
curly: [2, "multi-line"],
// 使用浏览器全局变量时加上 window. 前缀
"no-undef": 2,
// 不允许有连续多行空行
"no-multiple-empty-lines": [
2,
{
max: 1,
},
],
// 换行符在运算符的位置
"operator-linebreak": [
2,
"after",
{
overrides: {
"?": "before",
":": "before",
},
},
],
// 条件语句中赋值语句
"no-cond-assign": 2,
// 单行代码块两边加空格
"block-spacing": [2, "always"],
// 对属性名强制使用驼峰
camelcase: [
0,
{
properties: "always",
},
],
// 不允许有多余的行末逗号
"comma-dangle": [2, "never"],
// 始终将逗号置于行末
"comma-style": [2, "last"],
// 点号操作符须与属性需在同一行
"dot-location": [2, "property"],
// 函数调用时标识符与括号间不留间隔
"func-call-spacing": ["error", "never"],
// 键值对当中冒号与值之间要留空白
"key-spacing": [
2,
{
beforeColon: false,
afterColon: true,
},
],
// 构造函数要以大写字母开头, 但调用大写字母开头的函数不一定需要new
"new-cap": [
2,
{
newIsCap: true,
capIsNew: false,
},
],
// 无参的构造函数调用时要带上括号
"new-parens": 2,
// 对象中定义了存值器,一定要对应的定义取值器
"accessor-pairs": 2,
// 子类的构造器中一定要调用 super
"constructor-super": 2,
// 使用数组字面量而不是构造器
"no-array-constructor": "error",
// 避免使用 arguments.callee 和 arguments.caller
"no-caller": 2,
// 避免对类名重新赋值
"no-class-assign": 2,
// 避免修改使用 const 声明的变量
"no-const-assign": 2,
// 正则中不要使用控制符
"no-control-regex": "error",
// 不要对变量使用 delete 操作。
"no-delete-var": 2,
// 不要定义冗余的函数参数
"no-dupe-args": 2,
// 类中不要定义冗余的属性
"no-dupe-class-members": 2,
// 对象字面量中不要定义重复的属性
"no-dupe-keys": 2,
// switch 语句中不要定义重复的 case 分支
"no-duplicate-case": 2,
// 同一模块有多个导入时一次性写完
"no-duplicate-imports": "error",
// 正则中不要使用空字符
"no-empty-character-class": 2,
// 不要解构空值
"no-empty-pattern": 2,
//
"no-eval": 2,
"no-ex-assign": 2,
"no-extend-native": 2,
"no-extra-bind": 2,
"no-extra-boolean-cast": 2,
"no-extra-parens": [2, "functions"],
"no-fallthrough": 2,
"no-floating-decimal": 2,
"no-func-assign": 2,
"no-implied-eval": 2,
"no-inner-declarations": [2, "functions"],
"no-invalid-regexp": 2,
"no-irregular-whitespace": 2,
"no-iterator": 2,
"no-label-var": 2,
"no-labels": [
2,
{
allowLoop: false,
allowSwitch: false,
},
],
"no-lone-blocks": 2,
"no-mixed-spaces-and-tabs": 2,
"no-multi-spaces": 2,
"no-multi-str": 2,
"no-new-func": "error",
"no-new-object": 2,
"no-new-require": 2,
"no-new-symbol": 2,
"no-new-wrappers": 2,
"no-obj-calls": 2,
"no-octal": 2,
"no-octal-escape": 2,
"no-path-concat": 2,
"no-proto": 2,
"no-redeclare": 2,
"no-regex-spaces": 2,
"no-return-assign": [2, "except-parens"],
"no-self-assign": 2,
"no-self-compare": 2,
"no-sequences": 2,
"no-shadow-restricted-names": 2,
"no-sparse-arrays": 2,
"no-template-curly-in-string": "error",
"no-this-before-super": 2,
"no-throw-literal": 2,
"no-trailing-spaces": 2,
"no-undef-init": 2,
"no-unmodified-loop-condition": 2,
"no-unneeded-ternary": [
2,
{
defaultAssignment: false,
},
],
"no-unreachable": 2,
"no-unsafe-finally": 2,
"no-unsafe-negation": "error",
"no-useless-call": 2,
"no-useless-computed-key": 2,
"no-useless-escape": 0,
"no-useless-rename": 2,
"no-whitespace-before-property": 2,