文章图片

懒人攻略（快速上手使用总结） 没有时间深入了解？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 + EditorConfig】搞懂 ESLint 和 Prettier - 知乎

我是佩奇烹饪家，现居上海，一只勤劳的前端攻城狮，爱专研，爱技术，爱分享。
个人笔记，整理不易，再次感谢 阅读 、点赞、收藏 和 关注 ！
文章有任何问题欢迎大家留言指出，也欢迎大家一起交流学习！

推荐阅读

• 

  冬月是农历几月份 农历的冬月是几月
• 

  陌生人社交软件分析,可以给陌生人打电话的社交软件
• 

  南京交通职业技术学院怎么样好不好 南京交通职业技术学院怎么样
• 

  宝宝的腿是弯曲的，这种现象正常吗？会不会影响宝宝下肢的发育？
• 

  如何看翡翠的真假
• 

  成语小秀才192关攻略 192关答案是什么
• 

  骨干教师申请书
• 

  Java集合练习题——从控制台输入若干个字母放入集合中，将这些字母排序后（忽略大小写）打印出来
• 

  mongodb显示所有数据库 mongodb开启数据库
• 

  榴莲可以放冰箱冷藏吗
• 

  如何保养上海罗杰杜彼自动机械表
• 

  如何取消安卓系统更新提示更新提示信息吗,系统更新怎么操作?
• 

  王者六字名字温柔女生 王者六字名字温柔
• 

  海尔电热水器质量好不好 海尔热水器怎么样
• 

  ocr，信息技术中OCR是什么
• 

  红麻薯放冰箱冷藏好吗 麻薯要放冰箱冷藏吗
• 

  大金中央空调不启动解决故障排除图解,这些方面需要注意了
• 

  核心交换机接入路由器配置 华为三层交换机配置实例
• 

  刘备封黄忠为后将军，关羽为何要破口大骂?
• 

  云顶之弈卡莎阵容推荐 云顶之弈卡莎阵容怎么搭配

• CVE-2020-16898|CVE-2020-16898 TCP/IP远程代码执行漏洞
• 标签、语法规范、内联框架、超链接、CSS的编写位置、CSS语法、开发工具、块和内联、常用选择器、后代元素选择器、伪类、伪元素。
• 不废话，代码实践带你掌握|不废话，代码实践带你掌握 强缓存、协商缓存！
• 工具|后天就是七夕节，你准备好了吗（送上几个七夕代码，展示你技能的时候到了！）
• 《机器学习实战》高清中文版PDF英文版PDF+源代码下载
• 霍兰德职业代码对照表
• Java|规范的打印日志
• Hexo代码块前后空白行问题
• 前端代码|前端代码 返回顶部 backToTop
• 11-代码注入