在代码规范的道路上,我们终极目标是:
团队中的所有开发人员用一套代码规范规则,并且无需我们花太大的精力去为了格式而格式。希望有一套自动化工具,帮我们检测代码是否规范,如果不规范,则自动能够帮我们按照既定规范格式化。
通过对 eslint 和 prettier 的大致了解,其实可以发现,prettier 是用于格式化代码的。而代码规范规则的设置和代码上的 warn,error 等提醒,则是 eslint 来实现的。故而,我们的大目标应该是 eslint,然后把 prettier 集成进来。
VSCode 编辑器拓展插件
VSCode中 Prettier - Code formatter 插件设置详细教程:GitHub - prettier/prettier-vscode: Visual Studio Code extension for Prettier
- Vetur - Visual Studio Marketplace
- ESLint - Visual Studio Marketplace
- 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
使用方法总结
- 分别安装VSCode插件:
Prettier
、ESLint
、EditorConfig
; - 本地安装依赖
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 复制代码
- 安装 Pre-commit Hook:
npx mrm lint-staged
- 执行
git commit
后 ESLint 会进行格式检查并自动修复,对于不能自动修复的语法会进行警告并阻止 commit; - 在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']
}
};
复制代码