ESLint+Prettier+EditerConfig 实现团队代码规范

在代码规范的道路上，我们终极目标是：

团队中的所有开发人员用一套代码规范规则，并且无需我们花太大的精力去为了格式而格式。希望有一套自动化工具，帮我们检测代码是否规范，如果不规范，则自动能够帮我们按照既定规范格式化。

通过对 eslint 和 prettier 的大致了解，其实可以发现，prettier 是用于格式化代码的。而代码规范规则的设置和代码上的 warn，error 等提醒，则是 eslint 来实现的。故而，我们的大目标应该是 eslint，然后把 prettier 集成进来。

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

项目依赖

EditorConfig

官方文档：EditorConfig

简介：跨编辑器和IDE编写代码，保持一致的简单编码风格；

Prettier

官方文档：Prettier

简介：专注于代码格式化的工具，美化代码；

安装

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中。

其他方案详见 prettier.io/docs/en/pre…

忽略 Prettier

使用.prettierignore文件完全忽略（即不重新格式化）某些文件和文件夹。

# Ignore artifacts:
build
coverage

# Ignore all HTML files:
*.html
复制代码

Prettier 总结

• 在你的编辑器中安装正确版本的 Prettier 插件，确保团队中每个人安装的版本是一致的；
• 在项目中本地安装正确版本的 Prettier 依赖，确保团队中每个人安装的版本是一致的；
• 添加一个 .prettierrc.json 配置文件去告诉编辑器你正在使用 Prettier；
• 添加一个 .prettierignore 配置文件告诉你的编辑器哪些文件不需要格式化；
• 通过运行 npx prettier —write . 去格式化整个项目的文件；
• 通过运行 npx prettier —check . 检查每个项目文件的格式规范；
• 使用 eslint-config-prettier 确保 ESLint 和 Prettier 能够完美协作；
• 设置 pre-commit 钩子确保每一次提交的代码都是经过格式化的。

ESLint

官方文档：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 配置文件

使用 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

使用方法总结

1. 分别安装VSCode插件：Prettier、ESLint、EditorConfig;
2. 本地安装依赖 eslint、eslint-config-prettier、babel-eslint、prettier、eslint-config-prettier、eslint-config-prettier 等依赖；

   npm install eslint eslint-config-prettier babel-eslint prettier eslint-config-prettier eslint-config-prettier --save-dev
   复制代码

3. 安装 Pre-commit Hook: npx mrm lint-staged
4. 执行 git commit 后 ESLint 会进行格式检查并自动修复，对于不能自动修复的语法会进行警告并阻止 commit；
5. 在package.json中添加命令，使用npm run lint检查语法和格式，使用npm run lint --fix对语法和格式进行修复

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

推荐配置

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": false,
    "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']
    }
};
复制代码