乐趣区

关于前端:前端代码风格实践-prettier-ESLint-Git-Hook-lintstaged

jiezi

整洁的代码如同柔美的散文。—— 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.js
module.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.js
module.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.js
module.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. 总结

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

退出移动版