VUE：ESlint、Prettier、commitizen

1.通过ESlint和Prettier代码格式规范，通过commitizen规范化提交信息

1.代码格式规范相关

• eslint：代码格式校验
• prettier：prettier 主要是为了格式化代码，而在没有 prettier 之前，是用 eslint —fix和 编辑器自带代码格式来进行代码格式化的。
• stylelint：css样式格式校验

2.代码提交规范相关

• lint-staged：一个在git暂存文件上运行linters的工具，检查本次修改更新的代码，并自动修复并且可以添加到暂存区
• husky: 是一个Git Hook 工具。将其安装到所在仓库的过程中它会自动在 .git/ 目录下增加相应的钩子实现对应的功能，这里我们通过使用husky来监测commit-msg钩子，完成提交信息校验，监测 pre-commit 钩子，完成代码校验。
• pre-commit：git hooks的钩子，在代码提交前检查代码是否符合规范，不符合规范将不可被提交
• commit-msg：git hooks的钩子，在代码提交前检查commit信息是否符合规范
• commitizen：git的规范化提交工具，帮助你填写commit信息，符合约定式提交要求
• commitlint：用于检测提交的信息。

3.安装用到的所有包

npm install -D eslint prettier 
npm install -g commitizen 
commitizen init cz-conventional-changelog --save-dev --save-exact

4.配置eslint、prettier

eslint 是主要还是负责代码规则校验，prettier 只调整代码风格，代码样式，eslint 才是真正检查代码是否符合规范的工具。两者分工不同，所以需要配合使用。

.eslintrc.js

官方文档：https://eslint.org/

eslintrc.js 文件配置：

module.exports = {
   root: true ,// 表示该文件为根配置文件
    env: {
        es6: true,
        node: true,
        browser: true
    },
    extends: [
        'eslint:recommended',
        'plugin:prettier/recommended'
    ],
    parserOptions: {
        ecmaVersion: 2018,
        parser: require.resolve('babel-eslint'),
        sourceType: 'module'
    },
    plugins: [],
    ignorePatterns: ['.prettierrc.js', '.stylelintrc.js'],
    rules: {
		 "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    	"no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
	}
};

.prettierrc.js

这里根据需要配置具体的规则

官方文档：https://prettier.io/

新建 .prettierrc.js 文件配置：

module.exports = {
    // 一行最多 100 字符
    printWidth: 100,
    // 使用 4 个空格缩进
    tabWidth: 4,
    // 不使用缩进符，而使用空格
    useTabs: false,
    // 行尾需要有分号
    semi: true,
    // 使用单引号
    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',
    // 根据显示样式决定 html 要不要折行
    htmlWhitespaceSensitivity: 'css',
    // 换行符使用 lf
    endOfLine: 'lf'
};

命令行输入 eslint --fix sr