Eslint

介绍ESLint 是一个依据计划辨认并报告 ECMAScript/JavaScript 代码问题的工具，其目标是使代码格调更加统一并防止谬误。在很多中央它都与 JSLint 和 JSHint 相似，除了： ESLint 应用 Espree 对 JavaScript 进行解析。ESLint 在代码中应用 AST 评估计划。ESLint 齐全是插件式的，每个规定都是一个插件，你能够在运行时中增加更多插件。装置@REM npm 装置eslintnpm i -D eslint@REM yarn 装置eslintyarn add -D eslint配置配置过程npm init @eslint/configYou can also run this command directly using 'npm init @eslint/config'.Need to install the following packages: @eslint/create-config@0.4.6Ok to proceed? (y) y@REM 您还能够应用“npm init @eslint/config”间接运行此命令。@REM 须要装置以下软件包：@REM @eslint/create-config@0.4.6@REM 确定持续: 是How would you like to use ESLint? ... To check syntax only To check syntax and find problems> To check syntax, find problems, and enforce code style@REM 您想如何应用 ESLint？ ...@REM 仅查看语法@REM 查看语法并发现问题@REM > 查看语法、发现问题并强制执行代码格调What type of modules does your project use? ...> JavaScript modules (import/export) CommonJS (require/exports) None of these@REM 您的我的项目应用什么类型的模块？ ...@REM > JavaScript 模块（导入/导出）@REM CommonJS（要求/导出）@REM 都不是Which framework does your project use? ... React> Vue.js None of these@REM 您的我的项目应用哪个框架？ ...@REM React@REM > Vue.js@REM 都不是Does your project use TypeScript? » No / Yes@REM 您的我的项目应用 TypeScript 吗？ » 否/是Where does your code run? ... (Press <space> to select, <a> to toggle all, <i> to invert selection)√ Browser√ Node你的代码在哪里运行？ ...（按 <space> 进行抉择，<a> 切换全副，<i> 反转抉择）√ 浏览器√ 节点How would you like to define a style for your project? ...> Use a popular style guide Answer questions about your style@REM 您心愿如何为您的我的项目定义格调？ ...@REM > 应用风行的格调指南@REM 答复无关您格调的问题Which style guide do you want to follow? ... Airbnb: https://github.com/airbnb/javascript> Standard: https://github.com/standard/standard Google: https://github.com/google/eslint-config-google XO: https://github.com/xojs/eslint-config-xo@REM 您想遵循哪种格调指南？ ...@REM Airbnb: https://github.com/airbnb/javascript@REM > Standard: https://github.com/standard/standard@REM Google: https://github.com/google/eslint-config-google@REM XO: https://github.com/xojs/eslint-config-xoWhat format do you want your config file to be in? ...> JavaScript YAML JSON@REM 您心愿配置文件采纳什么格局？ ...@REM > JavaScript@REM YAML@REM JSON@REM 您抉择的配置须要以下依赖项：@REM eslint-plugin-vue@latest eslint-config-standard@latest eslint@^8.0.1 eslint-plugin-import@^2.25.2 eslint-plugin-n@^15.0.0 || ^16.0.0 eslint-plugin-promise@^6.0.0@REM ？您想当初装置它们吗？ » 否/是The config that you've selected requires the following dependencies:eslint-plugin-vue@latest eslint-config-standard@latest eslint@^8.0.1 eslint-plugin-import@^2.25.2 eslint-plugin-n@^15.0.0 || ^16.0.0 eslint-plugin-promise@^6.0.0? Would you like to install them now? » No / YesWhich package manager do you want to use? ...> npm yarn pnpm@REM 您想应用哪个包管理器？ ...@REM > npm@REM yarn@REM pnpm配置后果√ How would you like to use ESLint? · style√ What type of modules does your project use? · esm√ Which framework does your project use? · vue√ Does your project use TypeScript? · No / Yes√ Where does your code run? · browser, node√ How would you like to define a style for your project? · guide√ Which style guide do you want to follow? · standard√ What format do you want your config file to be in? · JavaScriptChecking peerDependencies of eslint-config-standard@latestThe config that you've selected requires the following dependencies:eslint-plugin-vue@latest eslint-config-standard@latest eslint@^8.0.1 eslint-plugin-import@^2.25.2 eslint-plugin-n@^15.0.0 || ^16.0.0 eslint-plugin-promise@^6.0.0√ Would you like to install them now? · No / Yes√ Which package manager do you want to use? · npmInstalling eslint-plugin-vue@latest, eslint-config-standard@latest, eslint@^8.0.1, eslint-plugin-import@^2.25.2, eslint-plugin-n@^15.0.0 || ^16.0.0 , eslint-plugin-promise@^6.0.0装置我的项目 Eslint 反对Webpack 形式装置 eslint-webpack-plugin@REM npmnpm install eslint-webpack-plugin -D@REM yarnyarn add eslint-webpack-plugin --save-dev在 Webpack.config.js 中应用具体配置可查看官网：eslint-webpack-plugin ...

背景大家好，我是前端老六。明天想提及一下我的项目代码标准这一块，平时咱们在搭建一个前端我的项目的时候，我的项目代码标准是咱们要思考的，在现在多人开发一个我的项目的时候那更是不能忽略。对于前端来说呢，咱们罕用的就是eslint+prettier，两者集成的形式，eslint负责监测咱们的语法错误，而prettier对咱们的代码格调进行标准。 ESlintESLint 是一个开源的 JavaScript 代码查看工具，由 Nicholas C. Zakas 于2013年6月创立。代码查看是一种动态的剖析，罕用于寻找有问题的模式或者代码，并且不依赖于具体的编码格调。对大多数编程语言来说都会有代码查看，一般来说编译程序会内置查看工具。 JavaScript 是一个动静的弱类型语言，在开发中比拟容易出错。因为没有编译程序，为了寻找 JavaScript 代码谬误通常须要在执行过程中一直调试。像 ESLint 这样的能够让程序员在编码的过程中发现问题而不是在执行的过程中。 Lint工具经验了JSLint、JSHint，最初是ESLint，ESLint 号称下一代的 JS Linter 工具，它的灵感来源于 PHP Linter，将源代码解析成 AST，而后检测 AST 来判断代码是否合乎规定。ESLint 应用 esprima 将源代码解析吃成 AST，而后你就能够应用任意规定来检测 AST 是否合乎预期，这也是 ESLint 高可扩展性的起因。 ES6 公布后，因为新增了很多语法，JSHint 短期内无奈提供反对，而 ESLint 只须要有适合的解析器就可能进行 lint 查看。这时 babel 为 ESLint 提供了反对，开发了 babel-eslint，让ESLint 成为最快反对 ES6 语法的 lint 工具。 ESlint能够做些什么1. 防止低级bug，找出可能产生的语法错误应用未声明变量、批改 const 变量……2. 提醒删除多余的代码申明而未应用的变量、反复的 case ……3. 确保代码遵循最佳实际可参考 airbnb style、javascript standard4. 对立团队的代码格调加不加分号？应用 tab 还是空格？Prettierprettier是一款强势果断的代码格式化工具，它简直移除了编辑器自身所有的对代码的操作格局，而后从新显示。就是为了让所有用这套规定的人有完全相同的代码。在团队合作开发的时候更是体现出它的劣势。与eslint，tslint等各种格式化工具不同的是，prettier只关怀代码格式化，而不关怀语法问题。prettier 的劣势也很显著，它反对 JavaScript （包含试验性功能）JSXAngularVueFlowTypeScriptCSS、Less 和 SCSSHTMLJSONGraphQLMarkdown，包含 GFM 和 MDXYAML不少编辑器内置了prettier插件反对，能够启用在保留时主动格式化代码格调，例如，如果你用的是Webstorm，在我的项目下载了prettier的状况下能够这样这样设置一下 应用Prettier在code review时不须要再探讨代码款式，节俭了工夫与精力。 ...

1.eslint、preitter 1.先建一个.prettierrc文件echo {}> .prettierrc2.创立.prettierignore 相似于.gitignore, 示意不须要格式化的文件3.手动格式化：yarn prettier --write.4.主动格式化：pre-commit Hook npx mrm lint-staged2.pre-commit hook: 提交前主动格式化 npx mrm lint-staged## package.json 针对某系文件进行格式化， 主动保留的一个配置..........."devDependencies": { ...... "husky": ">=6", "lint-staged": ">=10", "prettier": "^2.2.1" }, "lint-staged": { "*.{js,css,md,ts,tsx}": "prettier --write" }3.解决抵触 npm install eslint-config-prettier -D## package.json中......"eslintConfig": { "rules": { "@typescript-eslint/no-unused-vars": "off" }, "extends": [ "react-app", "react-app/jest", "prettier" // 用prettier的规定笼罩一部分eslint的规定 ] },}.husky 文件增加到git: git add .4.commitlint 检测commit message提交是否标准npm install @commitlint/config-conventional @commitlint/cli -D## 创立文件: commitlint.config.jsecho "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.jsnpx husky add .husky/commit-msg "yarn commitlint --edit $1"

1.代码查看工具1.装置工具npm i eslint -Dnpx eslint --init2.配置主动格式化在package.json中增加"lint": "eslint --ext .js,.jsx src --fix"。执行npm run lint会进行主动修复执行init实现会生成一个.eslintrc.js的文件 2.代码格调工具1.我的项目集成npm i prettier eslint-config-prettier eslint-plugin-prettier -D在.eslintrc 中,extend中增加 "prettier" 解决 eslint 和 prettier 的抵触 2.配置 .prettierrc1.编配置在根目录创立.prettierrc依据本人爱好的编码格局设置规定 // 本人配置{"semi": false,"tabWidth": 2,"trailingComma": "none","singleQuote": true,"arrowParens": "avoid"}2.装置prettier 3.解决配置了.prettierrc不失效问题把一下勾选框勾销这样就不会优先应用editorconfig配置文件了 3.git钩子Git 有很多的 hooks, 让咱们在不同的阶段,对代码进行不同的操作,管制提交到仓库的代码的规范性,和准确性, 以下只是几个罕用的钩子 pre-commit形容: 通过钩子函数,判断提交的代码是否符合规范commit-msg形容: 通过钩子函数,判断 commit 信息是否符合规范pre-push形容: 通过钩子,执行测试,防止对以前的内容造成影响4.工具huskyhusky 是一个 Git Hook 工具。husky 其实就是一个为 git 客户端减少 hook 的工具。将其装置到所在仓库的过程中它会主动在.git/目录下减少相应的钩子。绝对于git hooks的劣势：1.因为.git文件夹是不会被git跟踪的，所以.git/hooks目录下的hooks钩子无奈提交，就不能和别人共享钩子脚本。2.husky能够将git内置的钩子裸露进去，很不便地进行钩子命令注入，而不须要在.git/hooks目录下本人写shell脚本了。能够应用它来lint提交音讯、运行测试、lint代码等。当你commit或push的时候。husky触发所有git钩子脚本。lint-staged应用lint-staged对将要提交的内容进行lint校验，而不是给所有文件进行一次lintcommitlintcommit 信息校验工具，多人合作中能够标准commit信息，能够更清晰的查看每一次代码提交记录commitizen辅助 commit 信息 ,通过事后设置一些固定的选项来标准开发人员提交信息，如下图5.装置流程1.装置代码测验依赖npm i lint-staged husky -Dnpm set-script prepare "husky install" 执行此命令在package.json中增加脚本npm run prepare 初始化husky,将 git hooks 钩子交由,husky执行,会主动生成一个.husky文件夹pre-commit 执行 npx lint-staged 指令npx husky add .husky/pre-commit "npx lint-staged"执行此命令会在.husky下生成pre-commit文件，文件内容如下根目录创立 .lintstagedrc.json 文件管制检查和操作形式 ...

module.exports = { root: true, //以后配置不容许往父级或向上查找 parserOptions: { parser: 'babel-eslint', //babel-eslint解析器是对babel解析器的包装使其与ESLint解析 sourceType: 'module' }, env: { browser: true, //浏览器全局变量 node: true, //nodejs变量与语法 es6: true,// 启用ES6语法 },//指定浏览器环境 extends: ['plugin:vue/recommended', 'eslint:recommended'], // add your custom rules here //it is base on https://github.com/vuejs/eslint-config-vue 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" | "kebab-case"], //强制vue的name属性命名格局 "vue/no-v-html": "off", // 是否不容许应用v-html 'accessor-pairs': 2, //强制 getter 和 setter 在对象中成对呈现 'arrow-spacing': [2, { 'before': true, 'after': true }], //强制箭头函数的箭头前后应用统一的空格 'block-spacing': [2, 'always'], //禁止或强制在代码块中开括号前和闭括号后有空格 'brace-style': [2, '1tbs', { 'allowSingleLine': true }], //强制在代码块中应用统一的大括号格调 'camelcase': [0, { 'properties': 'always' }], //强制应用骆驼拼写法命名约定 'comma-dangle': [2, 'never'], //要求或禁止开端逗号 'comma-spacing': [2, { 'before': false, 'after': true }], //强制在逗号前后应用统一的空格 'comma-style': [2, 'last'], //强制应用统一的逗号格调 'constructor-super': 2, //要求在构造函数中有 super() 的调用 'curly': [2, 'multi-line'], //强制所有管制语句应用统一的括号格调 'dot-location': [2, 'property'], //强制在点号之前和之后统一的换行 'eol-last': 2, //要求或禁止文件开端存在空行 'eqeqeq': ["error", "always", {"null": "ignore"}], //要求应用 === 和 !== 'generator-star-spacing': [2, { 'before': true, 'after': true }], //强制 generator 函数中 * 号四周应用统一的空格 'handle-callback-err': [2, '^(err|error)$'], //要求回调函数中有容错解决 'indent': [2, 2, { 'SwitchCase': 1 }], //强制应用统一的缩进 'jsx-quotes': [2, 'prefer-single'], //强制在 JSX 属性中统一地应用双引号或单引号 'key-spacing': [2, { 'beforeColon': false, 'afterColon': true }],//强制在对象字面量的属性中键和值之间应用统一的间距 'keyword-spacing': [2, { 'before': true, 'after': true }],//强制在关键字前后应用统一的空格 'new-cap': [2, { 'newIsCap': true, 'capIsNew': false }],//要求构造函数首字母大写 'new-parens': 2, //强制或禁止调用无参构造函数时有圆括号 'no-array-constructor': 2, //禁用 Array 构造函数 'no-caller': 2, //禁用 arguments.caller 或 arguments.callee 'no-console': 'off', //禁用 console 'no-class-assign': 2, //禁止批改类申明的变量 'no-cond-assign': 2, //禁止条件表达式中呈现赋值操作符 'no-const-assign': 2, //禁止批改 const 申明的变量 'no-control-regex': 0, //禁止在正则表达式中应用控制字符 'no-delete-var': 2, //禁止删除变量 'no-dupe-args': 2, //禁止 function 定义中呈现重名参数 'no-dupe-class-members': 2, //禁止类成员中呈现反复的名称 'no-dupe-keys': 2, //禁止对象字面量中呈现反复的 key 'no-duplicate-case': 2, //禁止呈现反复的 case 标签 'no-empty-character-class': 2, //禁止在正则表达式中应用空字符集 'no-empty-pattern': 2, //禁止应用空解构模式 'no-eval': 2, //禁用 eval() 'no-ex-assign': 2, //禁止对 catch 子句的参数从新赋值 'no-extend-native': 2, //禁止扩大原生类型 'no-extra-bind': 2, //禁止不必要的 .bind() 调用 'no-extra-boolean-cast': 2, //禁止不必要的布尔转换 'no-extra-parens': [2, 'functions'], //禁止不必要的括号 'no-fallthrough': 2, //禁止 case 语句落空 'no-floating-decimal': 2, //禁止数字字面量中应用前导和开端小数点 'no-func-assign': 2, //禁止对 function 申明从新赋值 'no-implied-eval': 2, //禁止应用相似 eval() 的办法 'no-inner-declarations': [2, 'functions'], //禁止在嵌套的块中呈现变量申明或 function 申明 'no-invalid-regexp': 2, //禁止 RegExp 构造函数中存在有效的正则表达式字符串 'no-irregular-whitespace': 2, //禁止不规则的空白 'no-iterator': 2, //禁用 __iterator__ 属性 'no-label-var': 2, //不容许标签与变量同名 'no-labels': [2, { 'allowLoop': false, 'allowSwitch': false }], //禁用标签语句 'no-lone-blocks': 2, //禁用不必要的嵌套块 'no-mixed-spaces-and-tabs': 2, //禁止空格和 tab 的混合缩进 'no-multi-spaces': 2, //禁止应用多个空格 'no-multi-str': 2, //禁止应用多行字符串 'no-multiple-empty-lines': [2, { 'max': 1 }], // 禁止呈现多行空行 'no-new-object': 2, //禁用 Object 的构造函数 'no-new-require': 2, //禁止调用 require 时应用 new 操作符 'no-new-symbol': 2, //禁止 Symbolnew 操作符和 new 一起应用 'no-new-wrappers': 2, //禁止对 String，Number 和 Boolean 应用 new 操作符 'no-obj-calls': 2, //禁止把全局对象作为函数调用 'no-octal': 2, //禁用八进制字面量 'no-octal-escape': 2, //禁止在字符串中应用八进制转义序列 'no-path-concat': 2, //禁止对 __dirname 和 __filename 进行字符串连贯 'no-proto': 2, //禁用 __proto__ 属性 'no-redeclare': 2, //禁止屡次申明同一变量 'no-regex-spaces': 2, //禁止正则表达式字面量中呈现多个空格 'no-return-assign': [2, 'except-parens'], //禁止在 return 语句中应用赋值语句 'no-self-assign': 2, //禁止自我赋值 'no-self-compare': 2, //禁止本身比拟 'no-sequences': 2, //禁用逗号操作符 'no-shadow-restricted-names': 2, //禁止将标识符定义为受限的名字 'no-sparse-arrays': 2, //禁用稠密数组 'no-this-before-super': 2, //禁止在构造函数中，在调用 super() 之前应用 this 或 super 'no-throw-literal': 2, //禁止抛出异样字面量 'no-trailing-spaces': 2, //禁用行尾空格 'no-undef': 2, //禁用未声明的变量，除非它们在 /*global */ 正文中被提到 'no-undef-init': 2, //禁止将变量初始化为 undefined 'no-unexpected-multiline': 2, //禁止呈现令人困惑的多行表达式 'no-unmodified-loop-condition': 2, //禁用变化无穷的循环条件 'no-unneeded-ternary': [2, { 'defaultAssignment': false }], //禁止能够在有更简略的可代替的表达式时应用三元操作符 'no-unreachable': 2, //禁止在 return、throw、continue 和 break 语句之后呈现不可达代码 'no-unsafe-finally': 2, //禁止在 finally 语句块中呈现控制流语句 'no-unused-vars': [2, { 'vars': 'all', 'args': 'none' }], //禁止呈现未应用过的变量 'no-useless-call': 2, //禁止不必要的 .call() 和 .apply() 'no-useless-computed-key': 2, //禁止在对象中应用不必要的计算属性 'no-useless-constructor': 2, //禁用不必要的构造函数 'no-useless-escape': 0, //禁用不必要的转义字符 'no-whitespace-before-property': 2, //禁止属性前有空白 ------ 'no-with': 2, //禁用 with 语句 'one-var': [2, { 'initialized': 'never' }], //强制函数中的变量要么一起申明要么离开申明 'operator-linebreak': [2, 'after', { 'overrides': { '?': 'before', ':': 'before' } }], //强制操作符应用统一的换行符 'padded-blocks': [2, 'never'], //要求或禁止块内填充 'quotes': [2, 'single', { 'avoidEscape': true, 'allowTemplateLiterals': true }], //强制应用统一的反勾号、双引号或单引号 'semi': [2, 'never'], //要求或禁止应用分号代替 ASI 'semi-spacing': [2, { 'before': false, 'after': true }], //强制分号之前和之后应用统一的空格 'space-before-blocks': [2, 'always'], //强制在块之前应用统一的空格 'space-before-function-paren': [2, 'never'], //强制在 function的左括号之前应用统一的空格 'space-in-parens': [2, 'never'], //强制在圆括号内应用统一的空格 'space-infix-ops': 2, //要求操作符四周有空格 'space-unary-ops': [2, { 'words': true, 'nonwords': false }], //强制在一元操作符前后应用统一的空格 'spaced-comment': [2, 'always', { 'markers': ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ','] }], //强制在正文中 // 或 /* 应用统一的空格 'template-curly-spacing': [2, 'never'], //要求或禁止模板字符串中的嵌入表达式四周空格的应用 'use-isnan': 2, //要求应用 isNaN() 查看 NaN 'valid-typeof': 2, //强制 typeof 表达式与无效的字符串进行比拟 'wrap-iife': [2, 'any'], //要求 IIFE 应用括号括起来 'yield-star-spacing': [2, 'both'], //强制在 yield* 表达式中 * 四周应用空格 'yoda': [2, 'never'], //要求或禁止 “Yoda” 条件 'prefer-const': 2, //要求应用 const 申明那些申明后不再被批改的变量 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0, //禁用 debugger 'object-curly-spacing': [2, 'always', { objectsInObjects: false }], //强制在大括号中应用统一的空格 'array-bracket-spacing': [2, 'never'] //强制数组方括号中应用统一的空格 }}

间接输入干货 点击【All actions on save】 保留之后，试试 Command+Option+L 是不是依据ESLint文件配置格式化代码了。

置信小伙伴们在小学时都经验过小平头时代，那时的教务处主任天天学校门口巡视，同学们更是一个个大惊失色。那时的咱们就好比一行行代码，如果发型不一，上来就是两…55555 不说了…所以说对立款式更有助于咱们更对立的治理，也会使咱们少犯错误，这时 ESlint 站进去了，它就是教务处主任的化身，会将咱们的不拘一格的发型 (代码) 对立起来，尽管验证过得代码不肯定完满，然而肯定绝对标准。 什么是 ESLint?ESLint 是一个用来辨认 ECMAScript 并且依照规定给出报告的代码检测工具，应用它能够防止低级谬误和对立代码的格调。如果每次在代码提交之前都进行一次 eslint 代码查看，就不会因为某个字段未定义为 undefined 或 null 这样的谬误而导致服务解体，能够无效的管制我的项目代码的品质。 ESlint 的次要作用 代码品质问题：应用 / 编写的形式有可能有问题 (problematic patterns)代码格调问题：格调不合乎肯定规定 (doesn’t adhere to certain style guidelines)就好比有些同学喜爱应用 tab 缩进，有些喜爱空格，有些喜爱 2 个空格，有些喜爱 4 个。这就难办了，到底听谁的？ 最初通过一番笔战，选定 2 个空格作为规范。于是乎咱们在根目录创立了配置文件.eslintrc 并写入了咱们的伦果 // .eslintrc { "indent": ["error", 2] }为了大家的进步大家的开发体检及提交的一致性，你还‘威逼利诱’的让大家下载了 vscode 插件，没有通过 ESLint 校验的代码 VSCode 会给予下滑波浪线提醒，揭示他好好查看。 为了保障提交代码的十拿九稳，你还增加一个 pre-commit 钩子 eslint --ext .js src，确保没有通过 lint 的代码不会被提交。 最初还要求了大家应用 eslint --fix 将之前的所有代码，一键批改成了新标准下的代码格局。 什么是 Prettier?一个风行的代码格式化工具的名称，它可能解析代码，应用你本人设定的规定来从新打印出格局标准的代码。 Tony 老师认为发型很重要，Prettier 也这么认为。 Prettier 认为格局很重要，然而格局好麻烦，我来帮你们定好吧。简略来说，不须要咱们再思考到底是用 single quote，还是 double quote 这些乱起八糟的格局问题，Prettier 帮你解决。最初的后果，可能不是你齐全称心，然而，相对不会丑。 ...

本文记录如何开发一个elsint插件，浏览之前请先浏览官网的文档自定义插件，自定义规定。废话不多说，开搞。 创立一个eslint插件库须要创立一个npm我的项目，倡议命名为eslint-plugin-*或者@yourScope/eslint-plugin[-*]。在库的导出文件中，导出一个规范的插件对象: // lib/index.jsmodule.exports = { rules: { // key为规定id, 值为规定对象，个别放在独自的文件中导出，这里下文的两个规定为例 'no-use-foo-in-var-name': require('./rules/no-use-foo-in-var-name'), }, configs: { // 提供给使用者应用该插件时，对插件内的规定的默认应用 recommended: { rules: { 'no-use-foo-in-var-name': 'error', 'no-use-string-substr': 'error', }, }, },};接下来就是实现no-use-foo-in-var-name规定。 创立规定这里以创立一个简略的规定(no-use-foo-in-var-name)为例，假设一个需要，禁止代码中命名为foo这个单词。 首先对需要进行剖析，禁止命名为foo，那么应该须要禁止上面的状况中应用foo标识符(也就是规定文档中不举荐局部）： 参数定义时；导入模块时通过as从新定义；解构时从新赋值定义；参数名定义；对象字面量中有foo成员变量。对于上面这些状况，因为存在正当场景，且将不合理场景剖析进去老本很高，所以须要疏忽(也就是规定文档中保护的上面的代码不会正告局部)： 导入第三方库间接有的foo成员；已有对象中的foo成员操作,如obj.foo = 'xxxx'；对已有的对象中解构中蕴含foo，如const { foo } = object;因为本章节只是用于示例，所以只对上文中禁止的状况中，挑出两个进行实现： 参数定义时禁止应用foo变量名和对象字面量中有foo成员变量。 首先创立一个规定对象： // lib/rules/no-use-foo-in-var-name.jsmodule.exports = { // 规定元数据，具体浏览官网 meta: { type: 'problem', // 规定配置参数的验证器 schema: [], // 文档信息 docs: { description: '规定的形容', url: '规定文档地址', }, }, create(context) { // 规定理论逻辑 },};而后在create函数中实现拜访器, 首先实现对参数定义的ast节点的拜访器： ...

本文次要记录作者对eslint了解的关键点，倡议在浏览本文之前，先浏览eslint官网用户手册文档eslint是一个代码查看工具。 配置增加eslint后，进行代码测验并没有成果，还须要进行配置。 在我的项目下创立.eslintrc.js配置文件（更多配置形式请浏览官网），用于领导eslint的行为。 规定规定能够了解为对某种编码场景的查看纬度，如命名，缩进等。官网提供了十分多的规定，但默认是不开启状态，须要通过配置文件开启。 如开启一个规定，规定我的项目中字符串的字面量都是用双引号： module.exports = { rules: { quotes: ["error", "double"] },};更多的规定请见官网规定列表。 如果感觉配置规定太过于繁琐，或者不晓得如何配置时，能够应用一些他人曾经配置好的规定配置。这种规定配置个别称为格调，次要有： eslint-config-standard: js规范格调，特地宽松，举荐应用高级用法，比拟灵便，适宜精英小团队；eslint:recommended: eslint官网举荐，较严格，应用最广的格调；eslint-config-airbnb: 爱彼迎团队推出来的代码格调，比拟严苛，团队入门老手较多时举荐；更多格调，能够在github ,npm中应用关键字eslint-config进行搜寻，抉择适宜本人或者团队的。 对于他人配置好的规定配置，只须要在配置文件中，应用extends即能够继承，如： module.exports = { extends: ['eslint-config-airbnb'],};此时能够不须要额定去配置其配置项和规定，即可应用。如果这种社区的格调存在不适宜团队或者集体的中央，能够在以后配置中配置其余内容项进行调整，如规定，本人配置的内容具备最高优先级。 能够继承多个格调，多个格调中对于同个规定的配置，都是前面的笼罩后面的，其余配置的优先级也是一样。 有一个比拟非凡的格调就是eslint-config-prettier，该格调中只对一些能够通过prettier进行代码主动格式化操作的场景对应的规定给敞开，利用prettier去保障代码符合规范。所以当你的团队启用prettier的时候，须要保障eslint-config-prettier放在最初。 也能够把本人搭配进去的规定配置抽取公共的库，倡议命名标准为eslint-config-xxxx，在多个我的项目中应用。如果不想抽取为配置库，抽取为一个配置文件随便放在哪里也是能够的。 规定共享配置setting配置多个规定的独特配置配置（如果有）,这在一些eslint插件（下文会说）中用的比拟多，如eslint-plugin-import； 解析器和解析器选项能够在配置文件中通过parser配置对js进行语法信息的解析器。如果应用一些非凡的es6语法，可能应用eslint自带的语法解析器无奈反对到这些个性，能够配置为@babel/eslint-parser，利用babel插件机制，反对更广的语法。另外如果要反对typescipt语法，倡议配置为@typescript-eslint/parser。 通过parserOptions配置项能够配置对应解析器的解析器选项，具体配置，参照对应解析器的文档，都有举荐配置，或者依据理论需要场景配置。 其余配置倡议浏览官网。 插件当官网的规定不能笼罩全副理论场景时，eslint反对插件体系对其规定进行裁减。 这里举荐一些社区插件: @typescript-eslint/eslint-plugin： typescipt语法标准eslint-plugin-import：导入模块标准eslint-plugin-jsx-a11y: 推动无障碍反对标准eslint-plugin-react: react编写标准eslint-plugin-react-hooks: react hooks编写标准eslint-plugin-promise：promise应用标准eslint-plugin-lodash：lodash应用标准更多的能够应用关键字eslint-plugin在github和npm中搜寻，抉择适宜本人或者团队的插件。 每个插件都会扩大一些规定，但须要留神，当规定启用较多时，测验工夫就会减少。 每个插件根本的都有对插件内的规定的举荐配置，应用其举荐配置，能够疾速应用。 另外能够参考官网的文档自定义插件，自定义规定，依据集体需要和团队需要，实现更加贴合的测验规定。 应用在我的项目中集成eslint后，有多种应用形式。 vscodevscode中增加插件eslint，即可失效。能够在编码时及时反馈，养成良好编码习惯。 命令行eslint提供elsint指令，能够配置在package.json中的scripts中，也能够间接npx执行，相干命令行参数参照官网对应文章：eslint命令行。 webpack插件参考eslint-webpack-plugin即可。 node Apieslint提供node api模式，不便二次封装和集成在其余工具外面。如对其校验后果自定义格式化，该需要命令行指定format也能够，但更加倡议应用api的模式。 git hooks利用husky + lint-staged，对每次提交的每个文件进行测验，如果没通过，禁止提交。 提供一个参考的配置(配置在package.json的形式，其余形式参考相干技术，按需调整)： { "husky": { "hooks": { "pre-commit": "npx lint-staged" } }, "lint-staged": { "src/**/*.{js,jsx,tsx,ts}": [ "eslint --quiet", "git add" ] }}

关系npm装置的依赖，编辑器的插件，规定，到底这些是个什么关系 webpack的eslint，编辑器的插件，standard待更新

Lint 是什么？探讨怎么做之前，咱们很有必要给 Lint 来个清晰、精确的定义，wikipedia 的定义如下： In computer programming, lint is a Unix utility that flags some suspicious and non-portable constructs (likely to be bugs) in C language source code; generically, lint or a linter is any tool that flags suspicious usage in software written in any computer language. The term lint-like behavior is sometimes applied to the process of flagging suspicious language usage. Lint-like tools generally perform static analysis of source code.简略来说，Lint 就是对代码做动态剖析，并试图找出潜在问题的工具，实战中咱们也用 Lint 来指应用工具的过程。 ...

顾名思义，是对导入的模块进行排序，成果如下： 比照排序前后代码，排序后的代码看起来更整洁，react**全家桶、内部库、公共组件、子组件、api、工具类顺次排列。 罕用规定配置{ "import/order": ["error", { "groups": [ "builtin", "external", ["internal", "parent", "sibling", "index"], "unknown", ], "pathGroups": [ { "pattern": "@app/**", "group": "external", "position": "after" } ], "pathGroupsExcludedImportTypes": ["builtin"], "newlines-between": "always", "alphabetize": { "order": "asc", "acseInsensitive": true } }]}其中，group 是对导入模块进行分组，pathGroups 是通过门路自定义分组，newlines-between 不同组之间是否进行换行，alphabetize 依据字母程序对每个组内的程序进行排序 重点介绍下 pathGroups 属性，该属性有 4 个子属性： pattern：以后组中模块的最短门路匹配patternOptions：如果须要更准确的匹配，看这里group：在规定的组当选其一，index、sibling、parent、internal、external、builtin、object、type、unknownposition：定义组的地位，after、before对于 pathGroupsExcludedImportTypes 的作用愣是没看懂，欢送大家补充。

代码检测工具: Eslint 代码格式化工具: Prettier prettier能够在保留代码时，让代码合乎ESLint规范 在VSCode中装置prettier插件在我的项目根目录创立.prettierrc.js文件配置prettier module.exports = {semi: true,singleQuote: true,trailingComma: 'none'}在VSCode设置中勾选Format On Save，formatter中Default Formatter抉择Prettier-Code formatter在VSCode设置中批改Tab Size为2，将一个tab改为两个空格在.eslintrc.js中解决ESLint和Prettier之间的抵触 module.exports = { root: true, env: { node: true }, extends: [ 'plugin:vue/vue3-essential', '@vue/standard' ], parserOptions: { parser: 'babel-eslint' }, rules: { 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off', 'space-before-function-paren': 0 }}

一、rules定议各种限定规定，lint 工具的根本目标，就是对代码进行各种限定，对立格调。因为每个人、每个团队谋求的格调不同，所以工具也会提供各种配置，帮忙限定代码 module.exports = { extends: [], plugins: [], rules: { 'quotes': 'single', 'space-before-blocks': 'always', },}二、extends不同我的项目，如果心愿应用雷同的 rules，间接复制粘贴显然不是一个好办法，一是 rules 太多，配置文件会显得很乱，二是无奈同步更新，举荐应用的办法是把所需的 rules 抽离成一个 npm 包，须要的时候再通过 extends 援用。而且对于这些抽离进去的包，有着对立的命名标准extends 的模块名称以 eslint-config- 结尾，例如 eslint-config-myconfig 也反对 npm 作用域模块。例如 @scope/eslint-config 或 @scope/eslint-config-myconfig）应用的时候能够用全称，也能够用缩写 module.exports = { extends: [ 'eslint-config-myconfig', // 全称 //'myconfig' 缩写 ], plugins: [], rules: {},}extends 多个模块，如果规定抵触，地位靠后的包将笼罩后面的。rules 中的规定雷同，并且优先级恒定高于 extends module.exports = { extends: [ 'eslint:recommend', 'plugin:vue/vue3-recommended', 'prettier', 'prettier/@typescript-eslint' ], plugins: [], rules: {},}三、plugin能够应用 plugin 定义本人的规定 eslint-plugin-react, eslint-plugin-vue引入 plugin 能够了解为引入了额定的 rules，须要在 rules、extends 中定义后才会失效 ...

.eslintrc.js module.exports = { root: true, env: { node: true, }, extends: [ "plugin:vue/essential", "eslint:recommended", "@vue/typescript/recommended", "@vue/prettier", "@vue/prettier/@typescript-eslint", ], parserOptions: { ecmaVersion: 2020, }, rules: { /** * 官网规定: https://eslint.bootcss.com/docs/rules/ */ "no-console": process.env.NODE_ENV === "production" ? "warn" : "off", "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off", "@typescript-eslint/no-explicit-any": "off", "@typescript-eslint/camelcase": "off", "quotes": [1, "double"], // 引号类型 `` "" '' "semi": ["off", "always"], // 语句强制分号结尾 "semi-spacing": [0, { before: false, after: true }], // 分号前后空格 "newline-after-var": 2, // 变量申明后是否须要空一行 "getter-return": ["error", { allowImplicit: true }], // 强制 getter 函数中呈现 return 语句 "no-control-regex": "error", // 禁止在正则表达式中呈现控制字符 "no-dupe-args": "error", // 禁止在函数定义或表白中呈现重名参数 "no-dupe-keys": "error", // 禁止对象字面量中呈现反复的 key "no-duplicate-case": "error", // 禁止呈现反复的 case 标签 "no-empty": "error", // 禁止呈现空语句块 "no-empty-character-class": "error", // 禁止在正则表达式中应用空字符集 "no-ex-assign": "error", // 禁止对 catch 子句中的异样从新赋值 "no-extra-semi": "error", // 禁用不必要的分号 "no-func-assign": "error", // 禁止对 function 申明从新赋值 "no-inner-declarations": "error", // 要求函数申明和变量申明（可选的）在程序或函数体的顶部 "no-irregular-whitespace": "error", // 禁止不规则的空白 "no-obj-calls": "error", // 禁止将 Math、JSON 和 Reflect 对象当作函数进行调用 "no-unsafe-negation": "error", // 禁止对关系运算符的左操作数应用否定操作符 "require-atomic-updates": "error", // 禁止因为 await 或 yield的应用而可能导致呈现竞态条件的赋值 "use-isnan": "error", // 禁止与 ‘NaN’ 的比拟 "valid-typeof": ["error", { requireStringLiterals: true }], // 强制 typeof 表达式与无效的字符串进行比拟 "array-callback-return": "error", // 强制数组办法的回调函数中有 return 语句 "block-scoped-var": "error", // 强制把变量的应用限度在其定义的作用域范畴内 "curly": "error", // 强制所有管制语句应用统一的括号格调 "default-case": "error", // 要求 switch 语句中有 default 分支 "dot-location": ["error", "property"], // 强制要求点操作符和属性放在同一行 "dot-notation": ["error"], // 强制尽可能地应用点号 "eqeqeq": ["error", "always"], // 要求应用 === 和 !== "max-classes-per-file": "error", // 制每个文件只能蕴含一个特定数量的类，没有更多 "no-case-declarations": "error", // 不容许在 case 子句中应用词法申明, 能够用大括号 "no-else-return": "error", // 禁止 if 语句中 return 语句之后有 else 块 "no-empty-function": "error", // 禁止呈现空函数 "no-empty-pattern": "error", // 禁止应用空解构模式 "no-fallthrough": ["error", { commentPattern: "break[\\s\\w]*omitted" }], // 禁止 case 语句落空, 如果结尾有正文满足break[\\s\\w]*omitted，则疏忽 "no-floating-decimal": "error", // 禁止数字字面量中应用前导和开端小数点 "no-global-assign": "error", // 禁止对原生对象或只读的全局对象进行赋值 "no-multi-spaces": ["error", { ignoreEOLComments: true }], // 禁止在逻辑表达式、条件表达式、申明、数组元素、对象属性、序列和函数参数四周应用多个空格 "no-octal": "error", // 禁用八进制字面量 "no-redeclare": "error", // 禁止屡次申明同一变量 "no-self-assign": "error", // 禁止自我赋值 "no-with": "error", // 禁用 with 语句 "require-await": "error", // 禁止应用不带 await 表达式的 async 函数 "no-shadow-restricted-names": "error", // 禁止将标识符定义为受限的名字 "array-bracket-newline": ["error", { multiline: true }], "array-bracket-spacing": ["error", "never"], // 禁止在数组括号头和尾呈现空格 "block-spacing": "error", // 禁止或强制在代码块中开括号前和闭括号后有空格 "brace-style": "error", // 强制在代码块中应用统一的大括号格调 "camelcase": "error", // 强制应用骆驼拼写法命名约定 "comma-dangle": ["error", "always-multiline"], // 要求应用拖尾逗号 "comma-spacing": ["error", { before: false, after: true }], // 强制在逗号前后应用统一的空格(禁止在逗号前应用空格, 要求在逗号后应用一个或多个空格) "indent": ["error", 2], // 缩进格调, 2空格 "jsx-quotes": ["error", "prefer-double"], // 强制所有不蕴含双引号的 JSX 属性值应用双引号 "key-spacing": ["error", { beforeColon: false }], // 禁止在对象字面量的键和冒号之间存在空格 "keyword-spacing": ["error", { before: true }], // 要求在关键字之前至多有一个空格 "line-comment-position": ["error", { position: "above" }], // 强制行正文只在代码上方 // "lines-between-class-members": ["error", "always"], // 要求类成员之间呈现空行 "newline-per-chained-call": ["error", { ignoreChainWithDepth: 2 }], // 要求在办法链中, 容许在同一行成链的最大深度 "no-lonely-if": "error", // 禁止 if 语句作为惟一语句呈现在 else 语句块中 "no-multiple-empty-lines": ["error", { max: 1, maxEOF: 0 }], // 强制最大间断空行数(1), 强制文件开端的没有间断空行数 "no-whitespace-before-property": "error", // 禁止属性前有空白 // "object-curly-newline": ["error", { multiline: true }], // 强制花括号内应用换行符的一致性, 如果在属性外部或属性之间有换行符，就要求有换行符 "padding-line-between-statements": [ "error", { blankLine: "always", prev: ["const", "let", "var"], next: "*" }, { blankLine: "any", prev: ["const", "let", "var"], next: ["const", "let", "var"] }, ], // 要求或禁止在语句间填充空行, 该配置要求变量申明之后都有空行 "space-infix-ops": "error", // 要求操作符四周有空格 "spaced-comment": ["error", "always"], // 强制在正文中前后增加空格 "arrow-spacing": "error", // 强制箭头函数的箭头前后应用统一的空格 "no-class-assign": "error", // 禁止批改类申明的变量 "no-const-assign": "error", // 禁止批改用const申明的变量 "no-dupe-class-members": "error", // 禁止类成员中呈现反复的名称 "no-duplicate-imports": "error", // 禁止反复模块导入 "no-new-symbol": "error", // 禁止 Symbolnew 操作符和 new 一起应用 // "no-var": "error", // 要求应用 let 或 const 而不是 var "require-yield": "error", // 要求 generator 函数内有 yield "rest-spread-spacing": ["error", "never"], // 扩大运算符及其表达式之间不容许有空格 },};

当拜访以后源文件内未定义的变量时，no-undef 规定将收回正告。如果你想在一个源文件里应用全局变量，举荐你在 ESLint 中定义这些全局变量，这样 ESLint 就不会收回正告了。你能够应用正文或在配置文件中定义全局变量。 要在你的 JavaScript 文件中，用正文指定全局变量，格局如下： /* global var1, var2 */这定义了两个全局变量，var1 和 var2。如果你想选择性地指定这些全局变量能够被写入(而不是只被读取)，那么你能够用一个 "writable" 的标记来设置它们: /* global var1:writable, var2:writable */要在配置文件中配置全局变量，请将 globals 配置属性设置为一个对象，该对象蕴含以你心愿应用的每个全局变量。对于每个全局变量键，将对应的值设置为 "writable" 以容许重写变量，或 "readonly" 不容许重写变量。例如： { "globals": { "var1": "writable", "var2": "readonly" }}在 YAML 中： --- globals: var1: writable var2: readonly在这些例子中 var1 容许被重写，var2 不容许被重写。 能够应用字符串 "off" 禁用全局变量。例如，在大多数 ES2015 全局变量可用但 Promise 不可用的环境中，你能够应用以下配置: { "env": { "es6": true }, "globals": { "Promise": "off" }}因为历史起因，布尔值 false 和字符串值 "readable" 等价于 "readonly"。相似地，布尔值 true 和字符串值 "writeable" 等价于 "writable"。然而，不倡议应用旧值。 ...

如果某个我的项目引入eslint校验语法格局，启动我的项目后控制台报了很多相干的格局问题，一个一个文件去纠正就很解体，能够在package.json中配置脚本命令帮忙咱们一键修复所有的问题

在理论开发中难免会有协同开发的时候，每个开发编写代码的格调、提交代码备注信息等方面的格调不尽一致，因而当时对立格调变得尤为重要。本文将在我的项目中集成eslint、stylelint、commitlint帮忙校验JS脚本代码标准、CSS脚本标准以及commit msg标准。 筹备示例工程应用create-react-app脚手架搭建示例工程，工程反对typescript create-react-app react-lint --template typescripteslint在终端执行上面命令 npx eslint --init执行后，终端会呈现人机交互，依照本人需要勾选选项即可最初会提醒须要装置以下这些插件 eslint-plugin-react@latest @typescript-eslint/eslint-plugin@latest eslint-config-standard@latest eslint@^7.12.1 eslint-plugin-import@^2.22.1 eslint-plugin-node@^11.1.0 eslint-plugin-promise@^4.2.1 @typescript-eslint/parser@latest解释以下这些插件的作用： eslint-plugin-react：请留神，反对 JSX 语法并不等同于反对 React。React 对 ESLint 无奈辨认的JSX语法利用特定的语义。如果你正在应用 React 并且想要 React 语义反对，咱们倡议你应用 eslint-plugin-react@typescript-eslint/parser：ESLint 默认应用Espree作为其解析器，@typescript-eslint/parser解析器将 TypeScript 转换成与 estree 兼容的模式，以便在ESLint中应用。eslint-config-standard：是一个比拟风行的脚本格调插件，外面提供了很多代码格调规定。@typescript-eslint/eslint-plugin：为TypeScript代码库提供lint规定。eslint-plugin-import：该插件旨在反对ES2015 +（ES6 +）导入/导出语法的查看，并避免文件门路和导入名称拼写错误的问题。eslint-plugin-node：针对node语法的查看。eslint-plugin-promise：针对Promise语法的测验。执行完npx eslint --init后会在根目录生成.eslintrc配置文件 module.exports = {env: { browser: true, es2021: true},extends: [ 'plugin:react/recommended', 'standard'],parser: '@typescript-eslint/parser', // 将 TypeScript 转换成与 estree 兼容的模式，以便在ESLint中应用parserOptions: { ecmaFeatures: { jsx: true // 启用 JSX }, ecmaVersion: 12, // 指定你想要应用的 ECMAScript 版本 sourceType: 'module'},plugins: [ 'react', // eslint-plugin-react的缩写，使ESLint反对 React 语义 '@typescript-eslint' // @typescript-eslint/eslint-plugin的缩写，为TypeScript代码库提供lint规定],rules: { semi: [2, 'always'], 'no-use-before-define': 'off' // 'React' was used before it was defined}};stylelintcommitlint

问题如下： 解决方案：我的项目下新建vue.config.js并增加以下代码： module.exports = { lintOnSave: false,}

在根目录新增 vue.config.js 文件 vue.config.js文件代码module.exports = {    lintOnSave: false}

/** * 参考文档 * 【eslint英文文档】https://eslint.org/docs/user-guide/configuring * 【eslint中文文档】http://eslint.cn/docs/rules/ *//** * eslint有三种应用形式 * 【1】js代码中通过正文的形式应用 * 【2】通过webpack的eslintConfig字段设置，eslint会主动搜寻我的项目的package.json文件中的配置 * 【3】通过配置文件的形式应用，配置文件有多种文件形式，如JavaScript、JSON 或者 YAML等 *//** * 文件疏忽 * 【】让eslint跳过特定文件的检测 * 【】通过当前工作目录下 「.eslintignore」 文件进行设置 * 其应用的是Glob门路书写形式，与「.gitignore」的应用办法雷同 * 【】也能够在 package.json 文件中，通过 eslintIgnore 参数进行设置 *//** * 文件内部分设置 * 【】eslint能够具体文件中设置特定代码的规定，罕用于跳过某条语句的检测。 * 【】登记全副规定，在代码前新建一行，增加登记 /* eslint-disable *\/ 。如果没有复原设置的语句，则下列全副代码都会跳过检测。 * 【】复原eslint，在代码前新建一行，增加登记 /* eslint-enable *\/ * 【】指定疏忽的规定，/* eslint-disable no-alert, no-console *\/ * 【】在特定行禁用，// eslint-disable-line * 【】在下一行禁用，// eslint-disable-next-line */module.exports = { /** * 根目录标识 * http://eslint.cn/docs/user-guide/configuring#using-configuration-files * http://eslint.cn/docs/user-guide/configuring#configuration-cascading-and-hierarchy * 【】标识以后配置文件为最底层的文件，无需往更上一级的文件目录中进行搜寻 * 【】默认eslint的配置文件搜寻形式是，从指标文件夹进行搜寻，遍历外部每一个文件夹，找到配置文件并层叠应用。再跳出本我的项目，往先人文件夹进行遍历 * 【】留神「~/.eslintrc」的意义，「~」是指linux上的家目录，「~/.eslintrc」是指家目录下的eslint配置文件，用于私人开发者，用于整个电脑全局束缚的。这个配置通过本配置项root去设置，设置了root,eslint检测时将不会再往上搜寻 * 【】eslint的失效规定是就近应用，越近的配置项优先级越高，笼罩其余配置项。如一个我的项目中，能够在不同文件夹中都增加配置文件，这些规定将重叠组合失效 */ root: true, // 标识以后配置文件为eslint的根配置文件，让其进行在父级目录中持续寻找。 /** * 解析器 * http://eslint.cn/docs/user-guide/configuring#specifying-parser * 【】ESLint 默认应用Espree作为其解析器 * 【】解析器必须是本地装置的一个 npm 模块。即必须依照在本地的node_module中 * 【】解析器是用于解析js代码的，怎么去了解每一个表达式，有点C++中编译器的概念，会对js进行一些语法分析，语义剖析什么的，能力判断语句符不符合规范。而不是通过简略的字符串比照。 * 【】解析器有很多，但兼容eslint的解析器有以下几个 * Espree：默认解析器，一个从Esprima中分离出来的解析器，做了一些优化 * Esprima：js规范解析器 * Babel-ESLint： 一个对Babel解析器的包装，babel自身也是js解析器的一种（不然怎么能转化为兼容性代码呢？首先须要进行js解析，能力转化）。如果咱们的代码须要通过babel转化，则对应应用这个解析器 * typescript-eslint-parser(试验) - 一个把 TypeScript 转换为 ESTree 兼容格局的解析器 */ parser: 'babel-eslint', /** * 解析器配置项 * http://eslint.cn/docs/user-guide/configuring#specifying-parser-options * 【】这里设置的配置项将会传递到解析器中，被解析器获取到，进行肯定的解决。具体被利用到，要看解析器的源码有没有对其进行利用。这里仅仅做了参数定义，做了规定，通知解析器的开发者可能有这些参数 * 【】配置我的项目有： * "sourceType": "module", // 指定JS代码起源的类型，script(script标签引入？) | module（es6的module模块），默认为script。为什么vue的会应用script呢？因为vue是通过babel-loader编译的，而babel编译后的代码就是script形式 * "ecmaVersion": 6, // 反对的ES语法版本，默认为5。留神只是语法，不包含ES的全局变量。全局变量须要在env选项中进行定义 * "ecmaFeatures": { // Features是特色的意思，这里用于指定要应用其余那些语言对象 "experimentalObjectRestSpread": true, //启用对对象的扩大 "jsx": true, //启用jsx语法 "globalReturn":true, //容许return在全局应用 "impliedStrict":true //启用严格校验模式 } */ parserOptions: {}, /** * 运行环境 * http://eslint.cn/docs/user-guide/configuring#specifying-environments * 【】一个环境定义了一组预约义的全局变量 * 【】取得了特定环境的全局定义，就不会认为是开发定义的，跳过对其的定义检测。否则会被认为扭转量未定义 * 【】常见的运行环境有以下这些，更多的可查看官网 * browser - 浏览器环境中的全局变量。 * node - Node.js 全局变量和 Node.js 作用域。 * es6 - 启用除了 modules 以外的所有 ECMAScript 6 个性（该选项会主动设置 ecmaVersion 解析器选项为 6）。 * amd - 将 require() 和 define() 定义为像 amd 一样的全局变量。 * commonjs - CommonJS 全局变量和 CommonJS 作用域 (用于 Browserify/WebPack 打包的只在浏览器中运行的代码)。 * jquery - jQuery 全局变量。 * mongo - MongoDB 全局变量。 * worker - Web Workers 全局变量。 * serviceworker - Service Worker 全局变量。 */ env: { browser: true, // 浏览器环境 }, /** * 全局变量 * http://eslint.cn/docs/user-guide/configuring#specifying-globals * 【】定义额定的全局，开发者自定义的全局变量，让其跳过no-undef 规定 * 【】key值就是额定增加的全局变量 * 【】value值用于标识该变量是否被重写，相似于const的作用。true为容许变量被重写 * 【】留神：要启用no-global-assign规定来禁止对只读的全局变量进行批改。 */ globals: { // gTool: true, // 例如定义gTool这个全局变量，且这个变量能够被重写 }, /** * 插件 * http://eslint.cn/docs/user-guide/configuring#configuring-plugins * 【】插件同样须要在node_module中下载 * 【】留神插件名疏忽了「eslint-plugin-」前缀，所以在package.json中，对应的我的项目名是「eslint-plugin-vue」 * 【】插件的作用相似于解析器，用以扩大解析器的性能，用于检测非常规的js代码。也可能会新增一些特定的规定。 * 【】如 eslint-plugin-vue，是为了帮忙咱们检测.vue文件中 <template> 和 <script> 中的js代码 */ plugins: [ 'vue' ], /** * 规定继承 * http://eslint.cn/docs/user-guide/configuring#extending-configuration-files *【】可继承的形式有以下几种 *【】eslint内置举荐规定，就只有一个，即「eslint:recommended」 *【】可共享的配置， 是一个 npm 包，它输入一个配置对象。即通过npm装置到node_module中 * 可共享的配置能够省略包名的前缀 eslint-config-，即理论设置装置的包名是 eslint-config-airbnb-base *【】从插件中获取的规定，书写规定为 「plugin:插件包名/配置名」，其中插件报名也是能够疏忽「eslint-plugin-」前缀。如'plugin:vue/essential' *【】从配置文件中继承，即继承另外的一个配置文件，如'./node_modules/coding-standard/eslintDefaults.js' */ extends: [ 'plugin:vue/essential', // 额定增加的规定可查看 https://vuejs.github.io/eslint-plugin-vue/rules/ /** * 「airbnb，爱彼迎」 * 【】有两种eslint标准，一种是自带了react插件的「eslint-config-airbnb」，一种是根底款「eslint-config-airbnb-base」， * 【】airbnb-base 包含了ES6的语法检测，须要依赖 「eslint-plugin-import」 * 【】所以在应用airbnb-base时，须要用npm额定下载 eslint-plugin-import * 【】所以eslint实际上曾经因为 airbnb-base 根底配置我的项目，增加上了 eslint-plugin-import 插件配置 * 【】所以在setting和rules里，都有 'import/xxx' 我的项目，这里批改的就是 eslint-plugin-import 配置 */ 'airbnb-base', ], /** * 规定共享参数 * http://eslint.cn/docs/user-guide/configuring#adding-shared-settings * 【】提供给具体规定项，每个参数值，每个规定项都会被注入该变量，但对应规定而言，有没有用，就看各个规定的设置了，就好比 parserOptions，解析器用不必它就不晓得了。这里只是提供这个办法 * 【】不必狐疑，经源码验证，这就是传递给每个规定项的，会当做参数传递过来，但用不必，就是具体规定的事件 */ settings: { /** * * 留神，「import/resolver」并不是eslint规定项，与rules中的「import/extensions」不同。它不是规定项 * 这里只是一个参数名，叫「import/resolver」，会传递给每个规定项。 * settings并没有具体的书写规定，「import/」只是import模块本人起的名字，原则上，它间接命名为「resolver」也能够，加上「import」只是为了更好地区分。不是强制设置的。 * 因为「import」插件很多规定项都用的这个配置项，所以并没有通过rules设置，而是通过settings共享 * 具体应用办法可参考https://github.com/benmosher/eslint-plugin-import */ 'import/resolver': { /** * 这里传入webpack并不是import插件能辨认webpack，而且通过npm装置了「eslint-import-resolver-webpack」， * 「import」插件通过「eslint-import-resolver-」+「webpack」找到该插件并应用，就能解析webpack配置项。应用外面的参数。 * 次要是应用以下这些参数，共享给import规定，让其正确辨认import门路 * extensions: ['.js', '.vue', '.json'], * alias: { * 'vue$': 'vue/dist/vue.esm.js', * '@': resolve('src'), * 'static': resolve('static') * } */ webpack: { config: 'build/webpack.base.conf.js' } } }, /** * 针对特定文件的配置 * 【】能够通过overrides对特定文件进行特定的eslint检测 * 【】特定文件的门路书写应用Glob格局，一个相似正则的门路规定，能够匹配不同的文件 * 【】配置简直与 ESLint 的其余配置雷同。笼罩块能够蕴含惯例配置中的除了 extends、overrides 和 root 之外的其余任何无效配置选项， */ overrides: [ { 'files': ['bin/*.js', 'lib/*.js'], 'excludedFiles': '*.test.js', 'rules': { 'quotes': [2, 'single'] } } ], /** * 自定义规定 * http://eslint.cn/docs/user-guide/configuring#configuring-rules * 【】根本应用形式 * "off" 或者0 敞开规定 * "warn" 或者1 将规定关上为正告（不影响退出代码） * "error" 或者2 将规定关上为谬误（触发时退出代码为1） * 如：'no-restricted-syntax': 0, // 示意敞开该规定 * 【】如果某项规定，有额定的选项，能够通过数组进行传递，而数组的第一位必须是谬误级别。如0,1,2 * 如 'semi': ['error', 'never'], never就是额定的配置项 */ rules: { /** * 具体规定 * 【】具体的规定太多，就不做介绍了，有趣味的同学能够上eslint官网查 * 【】留神 xxx/aaa 这些规定是 xxx 插件自定的规定，在eslint官网是查不到的。须要到相应的插件官网中查阅 * 【】如 import/extensions，这是「eslint-plugin-import」自定义的规定，须要到其官网查看 https://github.com/benmosher/eslint-plugin-import */ 'import/extensions': ['error', 'always', { js: 'never', vue: 'never' }], 'import/no-extraneous-dependencies': ['error', { optionalDependencies: ['test/unit/index.js'] }], 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', "no-restricted-syntax": 0, // "guard-for-in": 0, // "prefer-const": 0, // "no-else-return": 0, // "no-plusplus": 0, // 不容许应用++符号 "object-shorthand": ["error", "always", { "avoidQuotes": false }], // 去除禁止'videoData.isPause'(newValue) 的命名 "no-lonely-if": 0, // 不容许给函数参数从新赋值 "no-param-reassign": 0, // 不容许给函数参数从新赋值 "no-mixed-operators": 0, // 不容许混合应用运算符 "no-underscore-dangle": 0, // 不容许下划线作为变量名之一 "no-under": 0, // 不容许混合应用运算符 'generator-star-spacing': 'off', 'no-console': 'off', // 禁用no-console规定 'semi': ['error', 'never'], // 行尾不应用分号 'comma-dangle': ['error'], 'eqeqeq': 0, // 不须要强制应用全等 'max-len': 0, 'radix': 0,// parseInt不须要传第二个参数 'linebreak-style': 0, // 强制执行统一的换行款式，windows和mac不一样 'consistent-return': 0, // 箭头函数最初不须要最初强制return值 'no-unused-expressions': ["error", { "allowShortCircuit": true, "allowTernary": true }], // 容许您在表达式中应用三元运算符 'no-multi-spaces': ['error', { "ignoreEOLComments": true }], }}原文地址：https://www.jb51.net/article/... ...

家喻户晓eslint只是个语法查看工具，要想做到真正的主动批改语法错误，还要考prettier。上面介绍两种形式，能够在VScode工具里应用。首先，所有的前提是你的vscode曾经装置了prettier插件，而且我倡议你开启保留时主动调整代码，文章最初附上。 上面步骤用图片代替：而后接下来的步骤两个可选项： 第一个 第二个好了，当初应用vuecli4.0生成的vue就胜利了。间接用VScode关上我的项目，而后在主目录增加这样这个文件：prettier.config.js。文件的内容次要如下： module.exports = { printWidth: 80, tabWidth: 2, useTabs: false, semi: false, // 开端不加尾号 singleQuote: true, // 默认单引号 quoteProps: 'as-needed', jsxSingleQuote: false, trailingComma: 'none', // es5对象属性最初加逗号。none不加 bracketSpacing: true, jsxBracketSameLine: false, arrowParens: 'always', htmlWhitespaceSensitivity: 'ignore', vueIndentScriptAndStyle: false, // script、style标签不缩进 endOfLine: 'lf',}当然这样还没行，在.eslintrc.js文件要多一个规定：这里是代码： 'space-before-function-paren': 'off'至此，我的项目就配置实现了。运行npm run serve能够我的项目失常运行。 补充如何在VScode开启prettier保留时运行呢？上面是步骤：关上设置->搜寻save 揭示如果我的项目理论开发过程中有哪些eslint的报错，间接在文件中敞开即可。如果有问题能够在上面发问，个别的问题博主大略可能应该能够答复。

后面讲了，wepack一些相干的常识，这里集成一下eslint的相干配置。首先装置对应模块： 装置eslint模块装置eslint-loader模块初始化 .eslintrc.js文件配置装置实现后先初始化配置：yarn eslint --init而后答复一些问题：1.咱们抉择查看语法，发现问题，执行对立代码格调2.模块化这里咱们应用javascript modules（es6语法）3.咱们目前假如说配置的是个react我的项目，选react4.咱们这里应用ts，选yes（应用ts的时候要先把ts装置下来，不然后续操作会报错）5.最终我专门这个工程运行时浏览器Browser6.咱们应用市面上支流格调 抉择了第一个 （应用了开源社区的标准Standard: https://github.com/standard/s...）7.配置文件应用了js格局8.最初主动装置一些其余的包最初配置文件js如果有一些全局要用的货色能够增加,例如jQueryglobals:{ "jQuery":"readonly"} eslint配置正文http://eslint.cn/docs/user-gu... webpack 中loader配置 而后就是eslint联合git hooks钩子在提交之前检测代码应用husky首先进行装置 npm install husky --save-dev而后对应package.json配置husky属性配置 pre-commit 这个git钩子阶段，来进行咱们的npm run test来进行查看而后 npm scripts里对应增加test命令, test:"eslint . src/"咱们检测src目录下的所有文件. 咱们能够手动在增加一个修复命令用来手动执行 test:"eslint --fix . src/"也能够git commit时主动格式化而后再add回来：首先装置 npm install -D lint-staged而后配置package.json,通过procommit调起lint-staged { "scripts": { "precommit": "lint-staged" }, "lint-staged": { "src/**/*.js": ["eslint --fix" , "git add"] }, "husky":{ "hooks":{ "pre-commit":"npm run precommit" } }}这样就能在commit之前，先用eslint修复在git add了。 如果想和Prettier配合起来一起应用的话请参考如下：Prettier介绍与根本用法

我的项目中须要对代码进行格式化，并且对代码进行校验。能够通过git提供的钩子在commit时能够对==git暂存区的文件==提前进行校验和格式化，如果校验不通过，则不让提交。 在我的项目中最开始运行的时候，能够把校验规定配置的等级低一些，后续再减少校验难度。 git钩子git hooks都存储在 .git/hooks文件夹，外面都是一些可执行的脚本。生成我的项目时，会生成一些带sample的文件，能够把sample去掉执行。 客户端钩子个别比拟罕用到的钩子 pre-commit：在commit音讯之前执行脚本prepare-commit-msg：能够在这里执行 提交信息的模板，合并提交、压缩提交等commit-msg: 对提交信息进行校验服务端钩子pre-receive：解决来自客户端的推送操作时执行husky 和 vue-clihusky提供了commits的各种钩子，包含pre-commit、commit-msg等。 vue-cli内置了git-hooks yorkie, yorkie是两年前从 husky 我的项目中fork进去的，关上能够看到yorkie曾经两年没有更新了。 husky 应用在pre-commit钩子中应用 lint-staged, lint-staged只会对git暂存区的文件进行校验。 装置相应依赖npm install --save-dev husky lint-stagednpm i -D prettiernpm i -D eslint-plugin-prettiernpm i -D eslint-config-prettiernpm i -D eslintnpm i -D eslint-plugin-standardnpm i -D eslint-plugin-vuenpm i -D stylelintnpm i -D stylelint-scssnpm i -D stylelint-config-standardnpm i -D stylelint-config-recess-orderhusky相应配置将上面配置拷贝到package.json中 "husky": { "hooks": { "pre-commit": "lint-staged" }},"lint-staged": { "*.{html,vue,css,scss}": [ "prettier --write", "stylelint --fix", "git add" ], "*.{js,vue}": [ "prettier --write", "eslint --fix", "git add -A" ]},Prettier配置格式化代码，通过配置.prettierrc达到我的项目中应用对立格局。能够与eslint配合应用。 ...

上一篇文章介绍了如何一键格式化 wxss 文件。 明天介绍利用 Git Hooks 钩子实现提交代码主动执行此前的 ESLint、Prettier 命令，以保障咱们提交的代码是不丑的。 一、Git 钩子Git 提供了一些钩子，能在特定的重要操作产生时触发自定义脚本。 当咱们执行 git init 初始化一个 Git 版本库时，Git 会默认在 .git/hooks 目录中搁置一些示例脚本（Shell 脚本）。这些示例脚本都是以 .sample 结尾，如果你想启用它们，得先移除这个后缀。 把一个正确命名（不带扩展名）且可执行的文件放入 .git/hooks 目录下，即可激活该钩子脚本。 这样一来，它就能被 Git 调用。 二、罕用钩子pre-commit该钩子在键入提交信息前运行。 它用于查看行将提交的快照，例如，查看是否有所脱漏，确保测试运行，以及核查代码。 如果该钩子以非零值退出，Git 将放弃此次提交，不过你能够用 git commit --no-verify 来绕过这个环节。 你能够利用该钩子，来查看代码格调是否统一、尾随空白字符是否存在，或新办法的文档是否适当等等。 三、huskyhusky 是一个为 Git 客户端减少 hook 的工具。当其装置到所在仓库时，它会主动在 .git/hooks 减少相应的钩子实现在 pre-commit 阶段就执行一系列保障每一个 commit 的正确性。 当然，pre-commit 阶段执行的命令，当然要保障其速度不要太慢，每次 commit 都等很久也不是好的体验。 1. 装置 npm-run-all它用于同步或者并行执行 npm script 脚本。 $ yarn add --dev npm-run-all@4.1.5于是乎，联合之前的 npm script，再通过 npm-run-all 来把几个命令串起来。 ...

本文将会联合 ESLint、Prettier、husky、lint-stage、gulp.js 等工具使得我的项目一键化操作，缩小在格式化、代码查看等操作上浪费时间，因为大前端真的太多货色学了，不学会“偷懒”的话，咱们就要落后更多了。 本系列文章的示例 Demo 在这里 ???? GitHub: wechat_applet_demo。 分为两篇文章介绍： 使Prettier一键格式化WXSS（上集）使Prettier一键格式化WXSS（下集）在简书也有更新 ???? 这里。 最近在做公司部门前端我的项目由 SVN 迁徙 Git 的事件，因为历史代码在此之前并没有引入相似 ESLint、Prettier 的代码查看或者格局束缚等工具。 目前部门仅剩我一人保护这十几个小程序、H5 前端我的项目。当初只有接触以前那些没有经手的我的项目，就头疼不想改。尽管思维是这样，但很无奈，谁让我只是一个“打工仔”呢！ 吐槽完，入正题。 一、必备1. 新建一个微信小程序我的项目此处过于简略省略一万字... # 或者克隆 wechat_applet_demo 我的项目下来$ cd your_folder$ git clone git@github.com:toFrankie/wechat_applet_demo.git2. 应用 yarn 作为包管理工具yarn 相干的装置不在本系列教程，置信你们都懂。也不再赘述，自行搜寻。 3. 应用 Visual Studio Code 作为编辑器尽管从业有一段时间了，不好意思，前端开发我只用 VS Code，未来好长一段时间应该还是它。至于什么 WebStorm、Atom、Sublime Text 等，用过但当初曾经不会了。 Anyway，什么开发工具不重要，本人用着难受就好。 上面介绍几个与本我的项目相干的 VS Code 插件 ESLint：自动检测 ESLint Rule，不合乎规定时，在编辑页面会有正告 ️Prettier - Code formatter：可用于格式化依照以上两个插件之后，须要对编辑器做增加一些配置。 思考到多人开发的场景，而每个人的开发工具配置不尽相同，所以我把以下配置放到我的项目根目录下中，并将其退出 Git 版本控制中，这样每个人拿到我的项目都有此配置了。 门路是：your_project/.vscode/settings.json { "files.associations": { "*.wxss": "css", "*.wxs": "javascript", "*.acss": "css", "*.axml": "html", "*.wxml": "html", "*.swan": "html" }, "files.trimTrailingWhitespace": true, "eslint.workingDirectories": [{ "mode": "auto" }], "eslint.enable": true, // 是否开启 vscode 的 eslint "eslint.options": { // 指定 vscode 的 eslint 所解决的文件的后缀 "extensions": [".js", ".ts", ".tsx"] }, "eslint.validate": ["javascript"], "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, "git.ignoreLimitWarning": true}二、要开始了1. yarn 初始化生成 package.json： ...

标准代码工具eslint创立vue我的项目时候会问你需不需要eslint,当然要啦，晓得是好货色，然而始终不会用。 因为你抉择在vue我的项目里装置这货色他就会有一些最根本的检测，比方 一个大红 'error' 就立在那，通知你有变量未定义但还未应用。而后他就不编译了，直到你改了。有时候你只是想这些变量在那，先看看成果，之后再解决，然而...他不批准。 ok，明天终于有精力钻研一下吧（其实之前钻研过一次，只知其一;不知其二啊） 在 vue-cli3 之后的版本里，vue会吧对于eslint的配置都放在package.json里 如下： 其实只有在rules 对象外面配置一些规定就行了。 然而在package.json外面配置规定切实太奇怪了，而且还不能写正文。 拆散把package.json外面的删掉。创立.eslintrc.js 文件, 外面： module.exports = {}而后配置一些项：root，parser, parserOPtions, env, extends, plugins, rules 当然除了这些还有，不过目前这就够了。 其实配置eslint就是分两大类， eslint的解析规定 （rules之外的项）eslint按什么规定去检测代码 （rules项）这些都配置好了之后，就功败垂成了。 注： 如果是中途加了一些规定，而后代码改变范畴很大怎么办呢？package.json 中启动参数那里有lint 也就是运行 npm run lint 会帮你一键校验并改过 上面是目前配置好的本人用的一套规定： 根本都应用的正告而不是报错。 module.exports = { // 此项是用来通知eslint找以后配置文件不能往父级查找 root: true, // 解析器 https://eslint.vuejs.org/user-guide/#usage parser: 'vue-eslint-parser', parserOptions: { 'parser': 'babel-eslint', 'sourceType': 'module' }, // 指定环境 env: { // 浏览器全局 browser: true, node: true, es6: true }, // 在这里增加更多的通用规定集 https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style extends: [ 'plugin:vue/essential', 'eslint:recommended' ], // 插件 检测 .vue 文件 plugins: [ // 'html' 'vue' ], /** * "off"或者0 敞开规定敞开 * "warn"或者1 在关上的规定作为正告（不影响退出代码） * "error"或者2 把规定作为一个谬误（退出代码触发时为1） */ rules: { 'semi': 1, 'quotes': [1, 'single'], // 引号类型 'no-unused-vars': 1, // 查看未应用变量 'no-undef': 0, // 查看未定义就应用变量 'no-useless-escape': 0, // 本义符 'indent': [1, 2], // 缩进格调 'no-trailing-spaces': 1, // 一行完结前面不要有空格 'spaced-comment': 1, // 正文格调要不要有空格什么的 'space-unary-ops': [1, { 'words': true, 'nonwords': false }], 'array-bracket-spacing': [1, 'never'], // 数组前后不加空格 'object-curly-spacing': [1, 'always'], // 对象前后加空格 'space-before-blocks': 1, // 代码块前后空格 'comma-dangle': [1, 'never'], // always-multiline：多行模式必须带逗号，单行模式不能带逗号 'comma-spacing': [1, { 'before': false, 'after': true }], // 管制逗号前后的空格 'key-spacing': [1, { 'beforeColon': false, 'afterColon': true }]// 对象字面量中冒号的前后空格 }};其余一些规定参数： ...

应用eslint和githooks对立前端格调前端团队开发时，是必须要有一个对立的前端标准的，用一套对立的标准来标准开发者，能够无效的防止在提交和拉取代码时造成的代码错乱问题，这边文章次要讲下咱们团队的代码标准应用，eslint联合vscode保留时主动修复不标准代码，githooks提交代码时的eslint校验和信息标准。增加eslintvue-cli3构建一个新我的项目(蕴含eslint模块),实现后增加.eslintrc.js配置如下: module.exports = { root: true, parserOptions: { parser: 'babel-eslint', sourceType: 'module' }, env: { browser: true }, // https://github.com/standard/standard/blob/master/docs/RULES-en.md extends: [ 'plugin:vue/base' ], // required to lint *.vue files plugins: [ 'vue' ], // add your custom rules here 'rules': { // allow paren-less arrow functions 'indent': [2, 2], // 两个空格的缩进 'quotes': [2, 'single'], // js必须应用单引号 'linebreak-style': [2, 'unix'], // 换行格调 unix/windows 'semi': [2, 'never'], // 语句强制分号结尾 // 'no-console': [1], // 不容许console语句 'no-unused-vars': [1], // 申明了变量然而没有应用检测 'space-unary-ops': [1, { 'words': true, 'nonwords': false }], // 一元运算符的前/后要不要加空格 'brace-style': [2, '1tbs', { 'allowSingleLine': false }], // 大括号格调 'comma-spacing': [2, { 'before': false, 'after': true }], // 逗号后有空格，前没有空格 'comma-style': [2, 'last'], // 逗号跟在结尾 'key-spacing': [2, { 'beforeColon': false, 'afterColon': true }], // 对象字面量中冒号的前后空格 'lines-around-comment': [ // 行前/行后备注 2, { 'beforeBlockComment': false, // 段正文的前后 'beforeLineComment': false, // 行正文的后面 'afterBlockComment': false, // 块正文的前面 'afterLineComment': false, // 行正文的前面 'allowBlockStart': true, 'allowObjectStart': true, 'allowArrayStart': true }], 'max-depth': [2, 4], // 代码最多容许4层嵌套 'max-len': [1, 1000, 2], 'max-nested-callbacks': [2, 3], // 回调嵌套深度 'max-params': [2, 5], // 函数最多只能有5个参数 'max-statements': [1, 80], // 单个函数最多80条语句 'no-array-constructor': [2], // 禁止应用数组结构器 'no-lonely-if': 2, // // 禁止else语句内只有if语句 'no-multiple-empty-lines': [2, { 'max': 3, 'maxEOF': 1 }], // 空行最多不能超过2行 'no-nested-ternary': 2, // 不应用嵌套的三元表达式 'no-spaced-func': 2, // 函数调用时 函数名与()之间不能有空格 'no-trailing-spaces': 2, // 一行完结前面不要有空格 'no-unneeded-ternary': 2, // 禁止不必要的嵌套 var isYes = answer === 1 ? true : false;简略的判断用三元表达式代替 'object-curly-spacing': [2, 'always', { // 大括号内是否容许不必要的空格 always始终容许；never始终不容许 'objectsInObjects': false, 'arraysInObjects': false }], 'arrow-spacing': 2, // =>的前/后括号 'block-scoped-var': 2, // 块语句中应用var 'no-dupe-class-members': 2, // 'no-var': 1, // 禁用var，用let和const代替 'object-shorthand': [1, 'always'], // 强制对象字面量缩写语法 'array-bracket-spacing': [2, 'never'], // 是否容许非空数组外面有多余的空格 'operator-linebreak': [2, 'after'], // 换行时运算符在行尾还是行首 // 'semi-spacing': [2, { 'before': false, 'after': false }], // 分号前后空格 'keyword-spacing': ['error'], 'space-before-blocks': 2, // 不以新行开始的块{后面要不要有空格 'block-spacing': [2, 'always'], 'space-before-function-paren': [2, 'never'], // 函数定义时括号后面要不要有空格 'space-in-parens': [2, 'never'], // 小括号外面要不要有空格 'spaced-comment': [1, 'always', { 'exceptions': ['-', '*', '+'] }], // 正文格调要不要有空格什么的 'arrow-parens': 0, // allow async-await 'generator-star-spacing': 0, // allow debugger during development 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0 }, globals: { '$': false, 'jquery': false, 'ActiveXObject': false, 'arbor': true, 'layer': false }}运行npm run lint会给出报错，运行npm run serve也会对我的项目进行eslint校验，无奈通过校验就会报错 ...