Vue代码规范化整理

代码规范化之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:

选择Manually select features

选择相关的Babel和Linter / Formatter:

选择相关的Babel和Linter / Formatter

选择 ESLint + Prettier:

选择 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.jsonlint-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!

有错误/补充还请指正!

参考链接

评论 抢沙发

表情
  1. #1

    来自湖南长沙的用户 10天前
    赞一个

  2. #2

    来自天津南开的用户 29天前
    很棒,很棒