提交代码时自动格式化

发表于 | 分类于 |

一个项目做完后，大哥要求我们要在当先项目中加上eslint和prettier来格式化代码，并且在提交代码时格式化。

Q: 为什么不一开始就用，等到项目做完再加？

A: 因为接手的项目框架是公司自己搭建的，之前这个项目中并没有配。

eslint

安装

$ yarn add babel-eslin eslint eslint-config-standard eslint-loader eslint-plugin-import eslint-plugin-html eslint-plugin-standar eslint-plugin-vue –dev

安装的里面有规则和运行时的编译，因为这个项目是用在 vue 中，所以添加了一些 vue 的规则eslint-plugin-vue

配置

根目录下新建.eslintrc.js文件，里面就是 eslint 的配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
module.exports = {
  root: true,
  parserOptions: {
    parser: "babel-eslint"
  },
  env: {
    browser: true,
    node: true
  },
  extends: ["plugin:vue/recommended", "standard"],
  plugins: ["vue"],
  rules: {
    indent: ["error", 2, { SwitchCase: 1 }],
    "space-before-function-paren": "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
    "no-undef": "off",
    "no-useless-escape": "off",
    "no-cond-assign": "off",
    "vue/html-indent": ["error", 2],
    "vue/max-attributes-per-line": "off",
    "vue/html-self-closing": "off",
    "vue/name-property-casing": "off",
    "vue/require-default-prop": "off"
  },
  globals: {}
}

extends里面的是需要继承的规则

rules里面都是自定义的规则，具体规则网上随便找找就有

eslint 规则

不参与

根目录下新建.eslintignore文件，其中添加不参与 eslint 规则的文件夹或文件

1
2
/node_modules/
/static/

prettier

安装

$ yarn add eslint-config-prettie eslint-plugin-prettier prettier –dev

其中eslint-plugin-prettier是为了让prettier和eslint公用一些规则，而不冲突

配置

可以在.eslintrc中进行配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
module.exports = {
  root: true,
  parserOptions: {
    parser: "babel-eslint"
  },
  env: {
    browser: true,
    node: true
  },
  extends: [
+    "plugin:prettier/recommended",
    "plugin:vue/recommended",
    "standard",
+    "prettier/standard"
  ],
  // required to lint *.vue files
-  plugins: ["vue"],
+  plugins: ["prettier"],
  // add your custom rules here
  rules: {
-    indent: ["error", 2],
+    indent: ["error", 2, { SwitchCase: 1 }],
    "space-before-function-paren": "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
    "no-undef": "off",
    "no-useless-escape": "off",
    "no-cond-assign": "off",
    "vue/html-indent": ["error", 2],
    "vue/max-attributes-per-line": "off",
    "vue/html-self-closing": "off",
    "vue/name-property-casing": "off",
    "vue/require-default-prop": "off",
+    "prettier/prettier": [
+      "error",
+      {
+        singleQuote: true,
+        semi: false,
+        tabWidth: 2
+      }
+    ]
  },
  globals: {}
}

注意extends中的先后顺序

这里也给出prettier的一些配置

prettier 的配置选项（参数）官网直译

其中我的配置是

singleQuote: true 单引号
semi: false 结尾不要分号
tabWidth: 2 缩进两个空格，和 eslint 保持一致

格式化

编辑器格式化

因为我用的 vscode，在 vscode 里面可以在按下保存时自动格式化代码

安装插件

安装插件ESLint，然后点开配置文件，打开这一项，就可以在保存是自动格式化代码了

1
"eslint.autoFixOnSave": true

命令行格式化

开篇说过，我的项目是写完后再加的eslint和prettier，让我一个文件一个文件点开去格式化，有点累。不如用代码帮你一键格式化

打开package.json

1
2
3
4
5
6
{
  "script": {
    "format": "prettier --write '**/*.{js,vue}'",
    "fix": "eslint --fix '**/*.{js,vue}'"
  }
}

这里我就只是去检查了js和vue文件，如果要需要检查别的，比如css,sass,md可以自行加进去

然后执行yarn run fix就可以自动把所有代码格式化注意路径，如果你根目录也有需要格式的自行改改

注意，有些地方还是需要手动改的，比如==改为===等

提交代码时进行格式化

在合作项目中，并不是每一个人都选择使用vscode，atom这样的编辑器，在保存时就可以格式化代码

也不能避免有的人没有使用格式化代码就提交，所以这里将格式化绑定到git commit命令中

安装

$ yarn add pre-commit

$ yarn add husky lint-staged –dev

pre-commit是 git commit 时调用的钩子

根据调用git commit时，调用钩子，下面的配置是将整个目录都执行一次格式化，其实比较消耗性能

husky和lint-staged是针对pre-commit时的优化

husky: 可以方便的让你通过npm scripts来调用各种git hooks

lint-staged: 利用git的staged特性，可以提取出本次提交的变动文件，让prettier/eslint只处理这些文件

配置

只使用pre-commit时的配置

1
2
3
4
5
6
7
{
  "script": {
    "fix": "eslint --fix '**/*.{js,vue}'",
    "lint:js": "fix"
  },
  "pre-commit": ["lint:js"]
}

配合husky和lint-staged使用

1
2
3
4
5
6
7
8
{
  "script": {
    "precommit": "lint-staged"
  },
  "lint-staged": {
    "**/*.{js,vue}": ["eslint --fix", "git add"]
  }
}

第一种方式速度虽然慢，但是会格式化所有代码

第二种方式速度很快，但是只会格式化有改动的文件

其实我推荐使用第二种，如果项目是后期才添加代码格式化的话，添加者应该先格式化一遍代码。

  • 注：
    1. 两种配置请不要同时使用
    2. 使用第二中配置只会格式化有修改的文件，并不会去格式没有格式化的代码。所以如果想要全局格式化，那就使用yarn run fix先格式化一次代码
我，曼妥思，打钱