代码规范化之Vue篇

写在前面

代码规范化的重要性不在这里展开了。

这一篇讲了Vue项目下如何做代码规范化的事情，主要涉及了eslint、prettier、husky+lint-staged、onchange、editorConfig这几个角色。

另外，虽然配置限于Vue项目，但整个思路也可以作为其他项目代码规范的借鉴！

希望你是vscoder~，因为接下来的配置实践都是在vscode中。

如果你来自其他编辑器，也提供了onchange的方法作为备用。

你需要提前准备：

• vscode插件：ESLint、Vetur、EditorConfig for VS Code
• node.js v8.10.0及以上

方法论

开始这个话题深入之前，有设定了几个期许目标：

1. 已有成熟规范作为主体
2. 支持自定义，自定义优先级大于规范主体（每个团队有自己的特别癖好）
3. 配置放在项目级别（不要求统一团队成员的编辑器配置）

后来在看了why precise commits后，对具体的“发生形式”增加两个考虑维度。

formate/lint + auto fix 发生形式：

1. 在保存时（ctrl+s）
2. hook（比如 Pre-commit hook）

formate/lint + auto fix 作用对象/粒度：

1. 当前编辑文件
2. Staged files(git add 之后)的整个文件

实践

项目都由 Vue CLI 脚手架生成，当前版本：4.1.2

方法一

生成项目

按下面步骤走你。

选择Manually select features：

选择相关的Babel和Linter / Formatter：

选择 ESLint + Prettier：

选择上 Lint on save 和 Lint and fix on commit：

最后一个选择配置文件是单独出来，还是放在package.json，选择 In dedicated config files。

补补改改

在工作空间添加插件配置：

• how？根目录新建vscode文件夹，里面新建settings.json文件，以下是settings.json内容；.gitignore中 把 .vscode 给去掉！

• why？满足插件配置放在项目级别的期许目标

  { "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, "vetur.validation.template": false }

修改.eslintrc.js配置：

• how？extends字段内容由"plugin:vue/essential"改为"plugin:vue/recommended"

• why？看eslint-plugin-vue available rules ，"plugin:vue/essential" 仅包含Base Rules和Priority A:Essential，"plugin:vue/recommended" 包含Base Rules、Priority A:Essential、Priority B: Strongly Recommended、Priority C: Recommended。想要有vue/attributes-order和 vue/order-in-components，so...

  module.exports = {
    root: true,
    env: {
      node: true
    },
    extends: ["plugin:vue/recommended", "@vue/prettier"],
    rules: {
      "no-console": process.env.NODE_ENV === "production" ? "error" : "off",
      "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off"
    },
    parserOptions: {
      parser: "babel-eslint"
    }
  };
  

增加.eslintignore忽略文件配置：

    build/*.js
    node_modules/*

增加 .prettierrc.js prettier配置文件：

    module.exports = {
      "semi": false,
      "arrowParens": "always",
      "singleQuote": true
    }

关闭生成项目内置的eslint-loader

• how? 通过 vue.config.js 关闭 vue-cli lintOnSave

• why? eslint-loader做 formate/lint + auto fix 的前提是把项目跑起来，和使用eslint插件或者onchange npm包两种形式相比，不具有优势，且会增加编译的时间

  module.exports = {
    lintOnSave: false
  }
  

方法二

生成项目

按下面步骤走你～

依然是选择Manually select features！

这次不再选择Linter / Formatter：

依然选择 In dedicated config files！

补补

prettier in eslint

• 需要npm包：babel-eslint、eslint、eslint-plugin-vue、prettier、eslint-config-prettier、eslint-plugin-prettier、vue-eslint-parser

eslint配置文件.eslintrc.js：

module.exports = {
    env: {
        "browser": true,
		"node": true,
        "es6": true
    },
    extends: [
        "eslint:recommended",
        'plugin:vue/recommended',
        "plugin:prettier/recommended",
        "prettier/vue"
    ],
    parser: "vue-eslint-parser",
    parserOptions: {
        "parser": "babel-eslint"
    },
    rules: {
	    "no-console": process.env.NODE_ENV === "production" ? 2 : 0,
        "no-debugger": process.env.NODE_ENV === "production" ? 2 : 0
    }
};

忽略文件.eslintignore：

build/*.js
node_modules/*

prettier配置文件.prettierrc.js：

module.exports = {
  "semi": false,
  "arrowParens": "always",
  "singleQuote": true
}

编辑器配置文件.vscode/settings.json：

	{
		"editor.codeActionsOnSave": {
			"source.fixAll.eslint": true
		},
		"vetur.validation.template": false
	}

把.vscode从.gitignore中去除！

hook

• 需要npm包：husky、lint-staged

• 一个命令完事：npx mrm lint-staged

• 修改下package.json中lint-staged的内容

  "husky": {
      "hooks": {
        "pre-commit": "lint-staged"
      }
    },
    "lint-staged": {
      "*.{js,vue}": [
        "eslint --fix",
        "git add"
      ]
    }
  

其他

增加 onchange 候选方案，需要提前跑一下添加eslint-watch的命令：

• how？yarn add onchange -D 安装 onchange包，其次在package.json添加脚本命令："eslint-watch": "onchange 'src/**/*.{js,vue}' -- eslint --fix {{changed}}"
• why？实践章加入的formate/lint + auto fix的发生形式需借助vscode ESLint插件，考虑到成员使用webstorm等编辑器，本方案不给出其他编辑器配置，仅提供onchange方案，保证在其他编辑器中也有丝滑体验！

增加.editorConfig编辑器配置文件，注意 vscode下需要 EditorConfig for VS Code插件：

• how? 拷贝了 Vue项目的配置

  # EditorConfig helps developers define and maintain consistent
  # coding styles between different editors and IDEs
  # editorconfig.org
  
  
  root = true
  
  [*]
  charset = utf-8
  indent_style = space
  indent_size = 2
  end_of_line = lf
  insert_final_newline = true
  trim_trailing_whitespace = true
  
  [*.md]
  insert_final_newline = false
  trim_trailing_whitespace = false
  

小结

这一套机制集成了这些功能：

• formate/lint on save + auto fix：eslint插件代理
• formate/lint on save + auto fix：onchange，备胎
• hook：husky+lint-staged
• 编辑器配置：.editorConfig

回过头来看一下最初设定的几个期许目标：

1. 已有成熟规范作为主体：eslint-plugin-vue + prettier
2. 支持自定义，自定义优先级大于规范主体：在.eslintrc.js中自定义eslint配置，在.prettierrc.js中自定义prettier配置
3. 配置放在项目级别：配置基本都在根目录下，vscode插件配置也放在了工作空间，即.vscode文件夹下

Done！

有错误/补充还请指正！

参考链接

• ESLint doc
• vscode eslint
• Prettier doc
• lint-staged readme
• EditorConfig
• 知乎-使用husky避免糟糕的git commit