项目中使用eslint+prettier规范前端代码规范

前言

常规前端项目中，需要规范团队的代码规范，除了手动的修改代码之外，可以借助插件来实现保存修改。这里选用eslint和prettier来实现代码风格统一。

关于prettier

prettier是一个代码美化工具，关于prettier配合使用的插件，包括eslint-plugin-prettier,还有其他的插件和脚本，具体可以参考https://github.com/prettier。

官方给的例子：

原代码：

foo(reallyLongArg(), omgSoManyParameters(), IShouldRefactorThis(), isThereSeriouslyAnotherOne());

格式化后:

foo(
  reallyLongArg(),
  omgSoManyParameters(),
  IShouldRefactorThis(),
  isThereSeriouslyAnotherOne()
);

使用：

结合编辑器使用（以vscode为例）

书写完代码后，点击保存就能按照定义好的风格进行格式化，减轻大量的开发时间。
查找插件如下并安装：

开始时使用：
1、编辑代码时，保存文件，自动格式化并保存
2、格式化某个文件时，在打开文件的当前页按shift + alt + f
3、格式化某段代码时，先选中这段代码，再按 shift + alt + f

脚本类直接使用：

安装（以npm为例）：

npm install --save-dev --save-exact prettier
npm install --g prettier

使用，直接使用prettier的命令

prettier --write <文件路劲+文件名>

添加自定义配置：
支持多种格式：

• .prettierrc 文件，支持yaml和json格式；或者加上扩展名也可以，可选的扩展名有 .yaml/.yml/.json
• .prettierrc.toml 文件
• prettier.config.js or .prettierrc.js 返回一个对象
• 或者在package.json文件中加上prettier对象

json配置文件写法:

{
  printWidth: 120, //换行的行长度
  tabWidth: 2, //指定每个缩进级别的空格数
  trailingComma: 'none', //多行使用拖尾逗号（默认none）
  eslintIntegration: true, //开启 Eslint 检测支持
  semi: false, //结尾不加分号
  singleQuote: true, //使用单引号
  jsxBracketSameLine: true //将>多行JSX元素放在最后一行的末尾
}

js的写法:

module.exports = {
  printWidth: 120, //换行的行长度
  tabWidth: 2, //指定每个缩进级别的空格数
  trailingComma: 'none', //多行使用拖尾逗号（默认none）
  eslintIntegration: true, //开启 Eslint 检测支持
  semi: false, //结尾不加分号
  singleQuote: true, //使用单引号
  jsxBracketSameLine: true //将>多行JSX元素放在最后一行的末尾
}

toml 文件写法

#  .prettierrc.toml
semi = false
singleQuote = true

yaml文件写法

# .prettierrc
semi: false
singleQuote: true

package.json文件中加上prettier对象

"prettier": {
    "printWidth": 120,
    "semi": false,
    "singleQuote": true,
    "eslintIntegration": true,
    "jsxBracketSameLine": true
  }

插件形式

另一种方式，如vue等项目中，以插件的形式使用（以eslint为例，配合eslint使用）：

npm install --save-dev prettier eslint-plugin-prettier

在.eslintrc.js中配置：

{
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error"
  }
}

在eslint-loader配置中，添加fix:true 就可以自动格式化了。

const path = require('path')
module.exports = {
  module: {
    rules: [
      {
        test: /\.(js|vue)$/,
        loader: 'eslint-loader',
        enforce: 'pre',
        include: [path.join(__dirname, 'src')],
        options: {
          fix: true
        }
      }
    ]
}

也可以用eslint的命令来实现，在启动项目时加上–fix，如eslint --fix

使用eslint-config-prettier 关闭 prettier 跟 eslint 冲突的rules
eslintrc.js中extends的配置设置为：

extends: ['eslint:recommended', 'plugin:prettier/recommended']

项目git commit时校验代码

安装lint-staged 和 yorkie

npm install yorkie lint-staged --save-dev

配置

在package.json中设置

 "scripts": {
	...
    "lint": "eslint --ext .js,.mpx src/"
  },
  "gitHooks": {
    "pre-commit": "lint-staged",
    "commit-msg": "node verify-commit-msg.js"
  },
  "lint-staged": {
    "src/**/*.{js,mpx}": [
      "npm run lint",
      "git add"
    ]
  },

关于commit-msg 的配置verify-commit-msg.js，遵循git 提交规范

const chalk = require('chalk')
const msgPath = process.env.GIT_PARAMS
const msg = require('fs').readFileSync(msgPath, 'utf-8').trim()

const commitRE = /^(revert: )?(feat|fix|docs|style|refactor|perf|test|workflow|ci|chore|types)(\(.+\))?: .{1,50}/

if (!commitRE.test(msg)) {
  console.log()
  console.error(
    `  ${chalk.bgRed.white(' ERROR ')} ${chalk.red(`invalid commit message format.`)}\n\n` +
    chalk.red(`  Proper commit message format is required for automated changelog generation. Examples:\n\n`) +
    `    ${chalk.green(`feat(compiler): add 'comments' option`)}\n` +
    `    ${chalk.green(`fix(v-model): handle events on blur (close #28)`)}\n\n` +
    chalk.red(`  See .github/COMMIT_CONVENTION.md for more details.\n`) +
    chalk.red(`  You can also use ${chalk.cyan(`npm run commit`)} to interactively generate a commit message.\n`)
  )
  process.exit(1)
}