关于前端:团队代码规范-ESLint-Prettier-EditorConfig

懒人攻略（疾速上手应用总结）

没有工夫深刻理解？6 步疾速带你配置团队代码标准，抄作业还不高兴吗！

1. 别离装置 VSCode 插件：Prettier、ESLint、EditorConfig;

2. 拉取最新代码，执行npm install，主动本地下载 eslint、eslint-config-prettier、babel-eslint、prettier、eslint-config-prettier 等依赖；

   npm install eslint eslint-config-prettier babel-eslint prettier eslint-config-prettier --save-dev

3. 按需增加 .prettierrc、.stylelintrc、.editorconfig等配置文件来标准团队代码，具体配置可酌情参考文末举荐配置。
4. 装置 Pre-commit Hook: npx mrm lint-staged
5. 执行 git commit 后 ESLint 会进行格局查看并主动修复，对于不能主动修复的语法会进行正告并阻止 commit；

6. 在 package.json 中增加命令，应用 npm run lint 查看语法和格局，应用 npm run lint —fix 对语法和格局进行修复

   "scripts": {
    "lint": "eslint --ext .js,.vue src",
    "lint-fix": "eslint --fix --ext .js,.vue src/"
     },

全文完结!（手动滑稽.png）

ESLint

ESLint 是什么

是一个开源的 JavaScript 的 linting 工具，应用 espree 将 JavaScript 代码解析成形象语法树 (AST)，而后通过 AST 来剖析咱们代码，从而给予咱们两种提醒：

1. 代码品质问题：应用形式有可能有问题(problematic patterns)
2. 代码格调问题 ：格调不合乎肯定规定 (doesn’t adhere to certain style guidelines)
   官网文档：ESLint – 插件化的 JavaScript 代码检测工具 – ESLint 中文文档

先决条件

• Node.js (>=6.14)；
• npm version 3+。

应用

装置 ESLint

npm install eslint —save-dev

装置 babel-eslint

npm install babel-eslint --save-dev

装置 eslint-config-prettier

npm install eslint-config-prettier --save-dev

确保 ESLint 配置不会与 Prettier 配置抵触。装置后会主动敞开 ESLint 非必要以及与 Prettier 抵触的规定；

初始化 ESLint 配置文件

应用 eslint --init 开始创立一个 ESLint 配置文件

谬误等级

• “off”or 0 – 敞开规定
• “warn”or 1 – 将规定视为一个正告（不会影响退出码）
• “error”or 2 – 将规定视为一个谬误 (退出码为 1)

官网举荐规定

• 应用 "extends": "eslint:recommended" 来开启举荐规定，详见 List of available rules – ESLint 中文文档

配置阐明

• Environments – 指定脚本的运行环境。每种环境都有一组特定的预约义全局变量。
• Globals – 脚本在执行期间拜访的额定的全局变量。
• Rules – 启用的规定及其各自的谬误级别。
• plugins – 第三方插件
• Extends – 继承
• Parser – 解析器，ESLint 默认应用 Espree 作为其解析器。
• parserOptions — 罕用于设置语法解析器的一些配置。

疏忽 ESLint

新增 .eslintignore 文件，你能够通过在我的项目根目录创立一个 .eslintignore 文件通知 ESLint 去疏忽特定的文件和目录
.eslintignore 文件是一个纯文本文件，其中的每一行都是一个 glob 模式表明哪些门路应该疏忽检测。例如，以下将疏忽所有的 JavaScript 文件：

**/*.js

文件中勾销 ESLint 罕用正文

/* eslint-disable */ —- 禁用全副规定 放在文件顶部则整个文件范畴都不查看 
/* eslint-disable no-alert, no-console */ -— 禁用某些规定 
// eslint-disable-line -— 以后行上禁用规定 
// eslint-disable-next-line —- 下一行上禁用规定

常用命令行

查看所有命令行选项：eslint -h

主动修复问题：eslint —-fix

禁用应用.eslintrc 中的配置：eslint -—no-eslintrc

对单个文件或文件目录进行格式化：eslint [options] [file|dir|glob]*

应用指定目录中的其余规定：eslant —-rulesdir [path::String]

只报告谬误，默认 false：eslint —-quiet

只查看有改变的文件，默认 false：eslint -—cache

明确格式化报告的输入文件：eslint -o, —output-file path::String

Prettier

Prettier 是什么

官网文档：Prettier
下面咱们说到，ESLint 次要解决了两类问题，但其实 ESLint 次要解决的是 代码品质问题 。另外一类 代码格调问题 其实 ESLint 并没有齐全做完，因为这些问题”没那么重要”，代码品质出问题意味着程序有潜在 Bug，而格调问题充其量也只是看着不爽。
这时候就呈现了 Prettier，Prettier 宣称本人是一个有主意 (偏见) 的代码格式化工具 (opinionated code formatter)，Prettier 认为 格局很重要，所以相当于 Prettier 接管了两个问题其中的代码格局的问题，而应用 Prettier + ESLint 就齐全解决了两个问题。

应用

装置 prettier

npm install —save-dev —save-exact prettier

装置 eslint-config-prettier

npm install —save-dev eslint-config-prettier

确保 ESLint 配置不会与 Prettier 配置抵触。装置后会主动敞开 ESLint 非必要以及与 Prettier 抵触的规定；

装置 lint-staged

npx mrm lint-staged

将 Prettier 与预提交工具联合应用。这能够在提交之前通过 git add 从新格式化标记为“staged”的文件。在装置之前，请确保 Prettier 已装置并位于 devDependencies 中。

其余计划详见 https://prettier.io/docs/en/p…

疏忽 Prettier

应用 .prettierignore 文件齐全疏忽（即不从新格式化）某些文件和文件夹。

# Ignore artifacts:
build
coverage

# Ignore all HTML files:
*.html

总结

• 在你的编辑器中装置正确版本的 Prettier 插件，确保团队中每个人装置的版本是统一的；
• 在我的项目中本地装置正确版本的 Prettier 依赖，确保团队中每个人装置的版本是统一的；
• 增加一个 .prettierrc.json 配置文件去通知编辑器你正在应用 Prettier；
• 增加一个 .prettierignore 配置文件通知你的编辑器哪些文件不须要格式化；
• 通过运行 npx prettier —write . 去格式化整个我的项目的文件；
• 通过运行 npx prettier —check . 查看每个我的项目文件的格局标准；
• 应用 eslint-config-prettier 确保 ESLint 和 Prettier 可能完满合作；
• 设置 pre-commit 钩子确保每一次提交的代码都是通过格式化的。

EditorConfig

EditorConfig 是什么

官网文档：EditorConfig
次要用于保护多个编辑器和 IDE 从事同一我的项目的多个开发人员的统一编码格调。EditorConfig 我的项目包含一个用于定义编码款式的文件格式和一个文本编辑器插件汇合，这些文本编辑器插件使编辑器能够读取文件格式并遵循定义的款式。
EditorConfig 和 ESLint 侧重点不同，EditorConfig 更偏差于代码格调，定义和保护统一的编码格调。ESLint 侧重于查看 Javascript 编程语法错误，二者并不抵触，同时配合应用能够使代码格调更加优雅。

举荐配置

editorConfig 配置：.editorConfig 文件

# EditorConfig is awesome: https://EditorConfig.org
# top-most EditorConfig file
# 适用范围：跨编辑器和 IDE 编写代码，保持一致的简略编码格调

# special property that should be specified at the top of the file outside of any sections. Set to true to stop .editorconfig files search on current file.
root = true 

# Unix-style newlines with a newline ending every file
[*]
end_of_line = lf # set to lf, cr, or crlf to control how line breaks are represented.
insert_final_newline = true # set to true to ensure file ends with a newline when saving and false to ensure it doesn't.

# Indentation override for all JS under lib directory
[**.{js,vue,ts}]
charset = utf-8 # set to latin1, utf-8, utf-8-bom, utf-16be or utf-16le to control the character set.
indent_style = space # set to tab or space to use hard tabs or soft tabs respectively.
indent_size = 4 # use 4 spaces instead of tabs;
trim_trailing_whitespace = true # remove trailing white space characters when saving

[*.md]
trim_trailing_whitespace = false

# Matches the exact files either package.json or .travis.yml
[{package.json,.travis.yml}]
indent_style = space
indent_size = 4

Prettier 配置：.prettierrc 文件

{
    "singleQuote": true,
    "semi": true,
    "arrowParens": "avoid",
    "bracketSpacing": true,
    "embeddedLanguageFormatting": "auto",
    "htmlWhitespaceSensitivity": "css",
    "insertPragma": false,
    "jsxBracketSameLine": false,
    "jsxSingleQuote": false,
    "printWidth": 200,
    "proseWrap": "never",
    "quoteProps": "as-needed",
    "requirePragma": false,
    "tabWidth": 4,
    "trailingComma": "none",
    "useTabs": false,
    "vueIndentScriptAndStyle": false
}

ESLint 配置：.eslintrc.js 文件

module.exports = {
    env: {
        es6: true,
        browser: true,
        node: true,
        commonjs: true,
        amd: true
    },
    extends: ['eslint:recommended', 'plugin:vue/essential', 'plugin:prettier/recommended'],
    parserOptions: {
        ecmaVersion: 12,
        sourceType: 'module',
        parser: 'babel-eslint'
    },
    plugins: ['vue', 'prettier'],
    rules: {
        'prettier/prettier': 'error',
        indent: ['error', 4],
        'linebreak-style': ['error', 'unix'],
        quotes: ['error', 'single'],
        semi: ['error', 'always']
    }
};

VSCode 编辑器拓展插件

1. Prettier – Code formatter – Visual Studio Marketplace

   VSCode中 Prettier – Code formatter 插件设置具体教程：GitHub – prettier/prettier-vscode: Visual Studio Code extension for Prettier

2. Vetur – Visual Studio Marketplace
3. ESLint – Visual Studio Marketplace
4. EditorConfig for VS Code – Visual Studio Marketplace

参考文献

搞懂 ESLint 和 Prettier – 知乎

我是佩奇烹饪家，现居上海，一只勤奋的前端攻城狮，爱专研，爱技术，爱分享。
集体笔记，整顿不易，再次感激 浏览、点赞、珍藏 和 关注！
文章有任何问题欢送大家留言指出，也欢送大家一起交流学习！