新手搭建vuecil4+vue3+ts+eslint+prettier+stylelint+husky+commitlint

一、楼主环境

npm 6.14.15 、@vue/cli 4.5.13、node v14.17.6

二、使用vue/cli初始构建项目

1. 命令行运行 vue create 项目名称

2. vuecil构建选项窗口

• 选择Manually自定义构建选项

• 选择以下8个选项

• 选择vue3

• 接下来3步都输入y表示确认

• 这一步选择官方推荐的dart-sass来引入scss包

• 选择eslint+prettier来规范项目代码

• 两个都选上，第二个选项是提供lint + commit来规范代码提交规范

• 测试框架按照喜好来选择，这里楼主选择了mocha，最后选项选择 in package.json

• 构建完毕

三、配置eslint与prettier

• 在根目录下新建.eslintrc.js文件

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/typescript/recommended',
    '@vue/prettier',
    '@vue/prettier/@typescript-eslint',
  ],
  parserOptions: {
    ecmaVersion: 2020,
  },
  // 可在rules自行添加规则
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'prettier/prettier': [
      'error',
      {
        semi: false, // 句尾分号
        useTabs: false, // 制表符缩进
        singleQuote: true, // 使用 ''
        trailingComma: 'es5', // 使用ES5 中有效的尾随逗号
        endOfLine: 'lf', // 非空行下一行换行
        tabWidth: 2, // 缩进
      },
    ],
  },
  overrides: [
    {
      files: [
        '**/__tests__/*.{j,t}s?(x)',
        '**/tests/unit/**/*.spec.{j,t}s?(x)',
      ],
      env: {
        mocha: true,
      },
    },
  ],
}

• 将package.json中的eslintConfig配置删除

• 在根目录下新建 .eslintignore文件

.DS_Store
node_modules
/dist


# local env files
.env.local
.env.*.local

# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*

# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

• eslint配置中扩展了@vue/prettier,@vue/prettier/@typescript-eslint配置，将eslint与prettier与ts语法规则联合在了一起，当运行eslint检测时，会优先按rules配置项来检测，接着是从extends配置项数组从后往前覆盖，也就是 rules配置项 > @vue/prettier/@typescript-eslint > @vue/prettier > typescript > eslint > vue3。

• 最后运行npm run lint 查看效果

四、配置stylelint

• npm i -D stylelint@13.13.1 stylelint-config-recess-order stylelint-config-standard@21.0.0

这里楼主先是直接安装stylelint与stylelint-config-standard的最新版本结果出错了，自己琢磨出了上面不会出错的版本，如果这两个版本在你的项目上跑不起来的话建议再百度下

• stylelint-config-recess-order包用来配置css属性顺序，stylelint-config-standard是stylelint的推荐配置

• 根目录下创建stylelint.config.js文件

module.exports = {
  extends: ['stylelint-config-standard', 'stylelint-config-recess-order'],
  rules: {
    'at-rule-no-unknown': [
      true,
      { ignoreAtRules: ['mixin', 'extend', 'content', 'include'] },
    ],
    indentation: 2,
    'no-descending-specificity': null,
    'no-empty-source': null,
  },
}

• 将stylelint运行语句添加到package.json，这里稍作下更改

    "lint:js": "vue-cli-service lint",
    "lint:css": "stylelint src/**/*.{vue,scss} --fix lint",
    "lint": "npx stylelint src/**/*.{vue,scss} --fix && npx vue-cli-service lint --fix"

npm run lint:css: stylelint将检测符合文件规则src/**/*.{vue,scss}的文件，--fix表示自动修复能够修复的语法规则。

npm run lint:js: 启动eslint语法检测修复功能。

npm run lint: 串行启动上述两个命令。

• 执行 npm run lint

五、husky+commitlint

• 命令行运行 vue add commitlint

• 下载完成后看到package中多了两个命令cz(在命令行窗口问答模式进行规范化的提交)，log(打印更新日志)

• 打印更新日志功能不常用，我们稍微改动下，将新增加的两行命令删除，替换为一行"commit": "cz"

• 运行npm run commit,下文报了一个找不到依赖包的错误，这里只要把right-pad下载下来就可以正常运行了，运行npm i -D right-pad

• 再次运行npm run commit，结果又是一片红，提示为未找到某个依赖包，这个包是vue add commitlint后下载的，楼主前思后想，决定用最原始的方法-卸了重装，重装后问题解决

• 运行npm run commit，可以看到命令行窗口出现了提示输入语句，到这一步就算成功了加入commitlint规范了。

• 接下来我们配置husky，增加功能：提交前检测暂存区文件是否有语法错误且进行修复，如有不能被修复的错误则取消提交，这里需要使用到lint-staged(只检测暂存区文件的语法)

• 运行npx husky install，根目录下会生成.husky文件夹

• 先后运行 npx husky add .husky/commit-msg 'npx --no-install commitlint --edit' 与 npx husky add .husky/pre-commit 'npx lint-staged'，可以看到.husky文件夹下多了两个文件

• 回到package文件，将gitHooks与husky配置删除，更改lint-staged配置，如图

"lint-staged": {
    "*.{js,jsx,vue,ts,tsx}": [
      "vue-cli-service lint"
    ],
    "*.{vue,scss}": [
      "stylelint --fix"
    ]
  }

• 最后，我们测试下是否配置成功，楼主在APP.vue文件添加了错误语法(不能被eslint修复)，随后运行npm run commit,填写提交信息后，程序启动lint-staged检测，发现错误后取消了提交

• 测试能被eslint自动修复的语法格式问题，同样的在APP.vue文件里修改，运行npm run commit提交信息后，程序启动lint-staged检测，修复了语法格式后成功提交了

大功告成！！