整洁的代码如同柔美的散文。—— Grady Booch

前言： 在繁冗的业务迭代时，接手其余我的项目，如果没有一个对立的代码格调，浏览起来是相当艰难的，毕竟团队里的每个人习惯不一样。团队合作，意味着须要就义一些共性，缩小一些没必要的争吵。

1.Prettier是什么？

顾名思义 prettier（更丑陋的），让你的代码更丑陋。官网说的很分明了

  • An opinionated code formatter
  • Supports many languages
  • Integrates with most editors
  • Has few options

很少的配置，意味着强约制，也遵循了第一条 opinionated 。what-is-opinionated-software，简略来说就是强约制，给你抉择的机会少。这种设计理念用在 代码格调对立 的工具上是极其正确的，目标就是对立，大量的配置，让团队进行争吵。

2.ESlint是什么

ESLint 是一个开源的 JavaScript 代码查看工具，由 Nicholas C. Zakas 于2013年6月创立。代码查看是一种动态的剖析，罕用于寻找有问题的模式或者代码，并且不依赖于具体的编码格调。

ESLint 是一个代码查看工具，它可能被开发者灵便的配置option，使其可能满足制订好的代码标准的要求。

tip：前端代码不论TS还是ES，都用ESLint， TSLint曾经不在保护了

3.Prettier 和 ESLint 的区别

我开始的时候也认为这两个货色如同有点反复，的确有交加，不过Prettier 只会做代码格调的对立，并不会查看代码标准，对于代码标准的查看应该交给 ESLint。

ESLint 次要解决的是代码标准，尽管ESLint也能够解决一些代码格调问题，但做的不够好， 而prettier就是为了 format 而生的工具。

总结：ESLint 专一于全方位的 Lint 查看，Prettier 专一于代码格式化相干。

4.实际

4.1配置 eslint

npm i -D eslint
//.eslintrc.jsmodule.exports = {  root: true,  env: {    node: true  },  extends: ['eslint:recommended'],  rules: {    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',    //强制应用单引号    quotes: ['error', 'single'],  // 看这里，是不是和prettier做了反复的事件，可删哦～    //强制不应用分号结尾    semi: ['error', 'never']  },  parserOptions: {    parser: 'babel-eslint',    ecmaVersion: 6 // 反对es6  }}

4.2配置 prettier

npm i -D prettier
// .prettierrc.jsmodule.exports = {  // 一行最多 100 字符  printWidth: 100,  // 应用 4 个空格缩进  tabWidth: 2,  // 不应用缩进符，而应用空格  useTabs: false,  // 行尾须要有分号  semi: false,  // 应用单引号  singleQuote: true,  // 对象的 key 仅在必要时用引号  quoteProps: 'as-needed',  // jsx 不应用单引号，而应用双引号  jsxSingleQuote: false,  // 开端不须要逗号  trailingComma: 'none',  // 大括号内的首尾须要空格  bracketSpacing: true,  // jsx 标签的反尖括号须要换行  jsxBracketSameLine: false,  // 箭头函数，只有一个参数的时候，也须要括号  arrowParens: 'always',  // 每个文件格式化的范畴是文件的全部内容  rangeStart: 0,  rangeEnd: Infinity,  // 不须要写文件结尾的 @prettier  requirePragma: false,  // 不须要主动在文件结尾插入 @prettier  insertPragma: false,  // 应用默认的折行规范  proseWrap: 'preserve',  // 换行符应用 lf  endOfLine: 'lf'}

4.3 ESLint 与 Prettier配合应用

npm i -D eslint-plugin-prettier
//.eslintrc.jsmodule.exports = {  rules: {      'prettier/prettier': 'error'  // 标记  },  "extends": ["plugin:prettier/recommended"] // 插件}

如果是vue的我的项目记得加上, "plugin:vue/essential"也要装置哦～

npm i -D eslint-plugin-vue

eslint-plugin-prettier插件会调用prettier对你的代码格调进行查看，其原理是先应用prettier对你的代码进行格式化，而后与格式化之前的代码进行比照，如果过呈现了不统一，这个中央就会被prettier进行标记。

当执行ESLint fix的时候prettier的lint抵触会被ESLint当做错误处理

4.4 解决eslint和prettier的抵触

上文提到，ESLint 与格式化相干的 rule 和 prettier 的 rule 有些重叠，如果想把格式化相干的事件都交给 prettier 去做，应用这个工具能够屏蔽掉 ESLint 与格式化相干的 rule。

装置 eslint-config-prettier 即可

npm i -D eslint-config-prettier

4.5装置 lint-staged husky

npm install husky lint-staged
// package.json"husky": {  "hooks": {    "pre-commit": "lint-staged"  }},"lint-staged": {  "*.{js, css, md}": "eslint --fix"},

4.6 最初 vscode配置

关上配置文件 setting.json

//setting.json{    "editor.codeActionsOnSave": {        "source.fixAll.eslint": true,  // 保留时主动执行eslint    },    }

5.总结

配置完 基情享受共事的的拥抱吧！