vue-cli生成项目，添加eslint+prettier+commitlint

查看vue-cli版本

vue-cli创建项目

vue create demo 或 如下图 （解决window下光标无法上下选择问题）


选择 Manually select features

选择Lint / Formatter 其他根据自己情况选择，vue的版本我选择2.0

选择dart-sass，查了资料说dart-sass比node-sass性能要好，回车，就自动安装依赖

Prettier配置

根目录下创建prettierrc.config.js文件

module.exports = {
  // tab缩进大小，默认为2
  tabWidth: 2,
  // 使用tab缩进，默认false
  useTabs: true,
  // 使用分号，默认true
  semi: true,
  // 使用单引号, 默认false，(在jsx中配置无效, 默认都是双引号)
  singleQuote: true,
  // 行尾逗号，默认none，可选（none|es5|all），es5 包括es5中的数组、对象，all 包括函数对象等所有可选
  trailingComma: "all",
  // 对象中的空格 默认true，true: { foo: bar }，false: {foo: bar}
  bracketSpacing: true,
  // JSX标签闭合位置 默认false
  jsxBracketSameLine: false,
  // 箭头函数参数括号 默认avoid 可选（avoid|always），avoid 能省略括号的时候就省略 例如x => x ，always 总是有括号
  arrowParens: "avoid",
};

修改package.json

"husky": {
    "hooks": {
      "pre-commit": "lint-staged",
      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
    }
  },
  "lint-staged": {
    "*.{js,jsx,vue}": [
      "vue-cli-service lint ./src --fix",
      "prettier --write ./src",
      "git add"
    ]
  }

Eslint配置

修改.eslintrc.js里rules字段，添加如下配置

rules: {
    "prettier/prettier": "off",

    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",

    /**
     * 代码中可能的错误或逻辑错误
     */
    "no-cond-assign": ["error", "always"], // 禁止条件表达式中出现赋值操作符
    "no-constant-condition": ["error", { checkLoops: true }], // 禁止在条件中使用常量表达式
    "no-control-regex": ["error"], // 禁止在正则表达式中使用控制字符
    "no-debugger": ["error"], // 禁用 debugger
    "no-dupe-args": ["error"], // 禁止 function 定义中出现重名参数
    "no-dupe-keys": ["error"], // 禁止对象字面量中出现重复的 key
    "no-duplicate-case": ["error"], // 禁止出现重复的 case 标签
    "no-empty": ["error", { allowEmptyCatch: true }], // 禁止出现空语句块
    "no-empty-character-class": ["error"], // 禁止在正则表达式中使用空字符集
    "no-ex-assign": ["error"], // 禁止对 catch 子句的参数重新赋值
    "no-extra-boolean-cast": ["error"], // 禁止不必要的布尔转换
    "no-extra-semi": ["error"], // 禁止不必要的分号
    "no-func-assign": ["warn"], // 禁止对 function 声明重新赋值
    "no-inner-declarations": ["error"], // 禁止在嵌套的块中出现变量声明或 function 声明
    "no-invalid-regexp": ["error", { allowConstructorFlags: [] }], // 禁止 RegExp 构造函数中存在无效的正则表达式字符串
    "no-irregular-whitespace": ["error"], // 禁止在字符串和注释之外不规则的空白
    "no-obj-calls": ["error"], // 禁止把全局对象作为函数调用
    "no-regex-spaces": ["error"], // 禁止正则表达式字面量中出现多个空格
    "no-sparse-arrays": ["error"], // 禁用稀疏数组
    "no-unexpected-multiline": ["error"], // 禁止出现令人困惑的多行表达式
    "no-unsafe-finally": ["error"], // 禁止在 finally 语句块中出现控制流语句
    "no-unsafe-negation": ["error"], // 禁止对关系运算符的左操作数使用否定操作符
    "use-isnan": ["error"], // 要求使用 isNaN() 检查 NaN

    /**
     * 最佳实践
     */
    "default-case": ["error"], // 要求 switch 语句中有 default 分支
    "dot-notation": ["error"], // 强制尽可能地使用点号
    eqeqeq: ["warn"], // 要求使用 === 和 !==
    "no-caller": ["error"], // 禁用 arguments.caller 或 arguments.callee
    "no-case-declarations": ["error"], // 不允许在 case 子句中使用词法声明
    "no-empty-function": ["error"], // 禁止出现空函数
    "no-empty-pattern": ["error"], // 禁止使用空解构模式
    "no-eval": ["error"], // 禁用 eval()
    "no-global-assign": ["error"], // 禁止对原生对象或只读的全局对象进行赋值
    "no-magic-numbers": ["error", { ignoreArrayIndexes: true }], // 禁用魔术数字
    "no-redeclare": ["error", { builtinGlobals: true }], // 禁止重新声明变量
    "no-self-assign": ["error", { props: true }], // 禁止自我赋值
    "no-unused-labels": ["error"], // 禁用出现未使用过的标
    "no-useless-escape": ["error"], // 禁用不必要的转义字符
    radix: ["error"], // 强制在parseInt()使用基数参数

    /**
     * 变量声明
     */
    "no-delete-var": ["error"], // 禁止删除变量
    "no-undef": ["error"], // 禁用未声明的变量，除非它们在 /*global */ 注释中被提到
    "no-unused-vars": ["error"], // 禁止出现未使用过的变量
    "no-use-before-define": ["error"], // 禁止在变量定义之前使用它们

    /**
     * ECMAScript 6
     */
    "arrow-spacing": ["error", { before: true, after: true }], // 强制箭头函数的箭头前后使用一致的空格
    "no-var": ["error"], // 要求使用 let 或 const 而不是 var
    "object-shorthand": ["error", "always"], // 要求或禁止对象字面量中方法和属性使用简写语法
    "prefer-arrow-callback": ["error", { allowNamedFunctions: false }], // 要求回调函数使用箭头函数
  },

安装commitlint

commit规范

1. 提交格式
git commit -m <type>[optional scope]: <description>
	
2. 常用的type类别
type ：用于表明我们这次提交的改动类型，是新增了功能？还是修改了测试代码？又或者是更新了文档？总结以下 11 种类型：
• build：主要目的是修改项目构建系统(例如 glup，webpack，rollup 的配置等)的提交
• ci：主要目的是修改项目继续集成流程(例如 Travis，Jenkins，GitLab CI，Circle等)的提交
• docs：文档更新
• feat：新增功能
• fix：bug 修复
• perf：性能优化
• refactor：重构代码(既没有新增功能，也没有修复 bug)
• style：不影响程序逻辑的代码修改(修改空白字符，补全缺失的分号等)
• test：新增测试用例或是更新现有测试
• revert：回滚某个更早之前的提交
• chore：不属于以上类型的其他类型(日常事务)
optional scope：一个可选的修改范围。用于标识此次提交主要涉及到代码中哪个模块。
description：一句话描述此次提交的主要内容，做到言简意赅。

例如：
git commit -m 'feat: 增加 xxx 功能'
git commit -m 'bug: 修复 xxx 功能'

效果如图

eslint校验失败

commitlint校验失败

成功提交