Eslint+prettier+stylelint+commitlint规范你的项目

写在开头

项目地址： vue3-project-template

自己一步步实验，踩了无数坑最终完成了项目的配置，最后汇总成这篇文章。这些步骤都是固定的，外加上里面都是一些基础配置，所以按照文章的步骤来配置一般不会出错，唯一容易出错的点就是各个依赖的版本问题

CSS书写规范

npm install stylelint stylelint-order stylelint-config-standard  stylelint-config-prettier -D

• stylelint:检验工具
• stylelint-order：css样式书写顺序插件
• stylelint-config-standard:stylelint的推荐配置
• stylelint-config-prettier：关闭所有不必要的或可能与 Prettier 冲突的规则

创建stylelint.config.js

module.exports = {
  root: true,
  plugins: ['stylelint-order'],
  extends: ['stylelint-config-standard', 'stylelint-config-prettier'],
  rules: {
    'selector-pseudo-class-no-unknown': [
      true,
      {
        ignorePseudoClasses: ['global'],
      },
    ],
    'selector-pseudo-element-no-unknown': [
      true,
      {
        ignorePseudoElements: ['v-deep'],
      },
    ],
    'at-rule-no-unknown': [
      true,
      {
        ignoreAtRules: [
          'tailwind',
          'apply',
          'variants',
          'responsive',
          'screen',
          'function',
          'if',
          'each',
          'include',
          'mixin',
        ],
      },
    ],
    'no-empty-source': null,
    'named-grid-areas-no-invalid': null,
    'unicode-bom': 'never',
    'no-descending-specificity': null,
    'font-family-no-missing-generic-family-keyword': null,
    'declaration-colon-space-after': 'always-single-line',
    'declaration-colon-space-before': 'never',
    // 'declaration-block-trailing-semicolon': 'always',
    'rule-empty-line-before': [
      'always',
      {
        ignore: ['after-comment', 'first-nested'],
      },
    ],
    'unit-no-unknown': [true, { ignoreUnits: ['rpx'] }],
    'order/order': [
      [
        'dollar-variables',
        'custom-properties',
        'at-rules',
        'declarations',
        {
          type: 'at-rule',
          name: 'supports',
        },
        {
          type: 'at-rule',
          name: 'media',
        },
        'rules',
      ],
      { severity: 'warning' },
    ],
  },
  ignoreFiles: ['**/*.js', '**/*.jsx', '**/*.tsx', '**/*.ts'],
}

创建忽略文件

//.stylelintignore 

/dist/*
/public/*
public/*
src/assets/font/*

配置命令

{
    "script":{
        "lint:stylelint": "stylelint --cache --fix \"**/*.{vue,less,postcss,css,scss}\" --cache --cache-location node_modules/.cache/stylelint/"
    }
}

JS书写规范（vue3）

npm install eslint eslint-plugin-vue  --save-dev # eslint相关
npm install prettier eslint-plugin-prettier @vue/eslint-config-prettier --save-dev # prettier相关
npm install @babel/eslint-parser  babel-preset-vite  --save-dev #babel相关

@babel/core  babel-plugin-component #没装

创建.eslintrc.js

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: ['plugin:vue/vue3-recommended', 'eslint:recommended', '@vue/prettier'],
  parserOptions: {
    ecmaVersion: 2022,
    parser: '@babel/eslint-parser',
    requireConfigFile: false,
    sourceType: 'module',
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-unused-vars': [
      2,
      {
        vars: 'all',
        args: 'none',
      },
    ],
  },
  globals: {
    defineProps: 'readonly',
    defineEmits: 'readonly',
    defineExpose: 'readonly',
    withDefaults: 'readonly',
  },
}

创建babel.config.js

module.exports = {
  presets: ['babel-preset-vite'],
}

创建.prettierrc

{
  "printWidth": 100,
  "tabWidth": 2,
  "useTabs": false,
  "semi": false,
  "vueIndentScriptAndStyle": false,
  "singleQuote": true,
  "quoteProps": "as-needed",
  "bracketSpacing": true,
  "trailingComma": "es5",
  "jsxSingleQuote": false,
  "arrowParens": "always",
  "insertPragma": false,
  "requirePragma": false,
  "proseWrap": "never",
  "htmlWhitespaceSensitivity": "strict",
  "endOfLine": "auto"
}

创建检验的忽略文件

// .eslintignore

*.sh
node_modules
*.md
*.woff
*.ttf
.vscode
.idea
dist
/public
/docs
.husky
.local
/bin
Dockerfile

//.prettierignore
/dist/*
.local
.output.js
/node_modules/**

**/*.svg
**/*.sh

/public/*

配置校验命令

手动运行npm run lint:eslint会去遍历文件进行语法校验，和修复部分语法

"script":{
     "lint:eslint": "eslint --cache --max-warnings 0  \"{src,mock}/**/*.{vue,ts,tsx}\" --fix"
}

Git提交规范

阮一峰的博客

规范 Commit Message和生成CHANGELOG.md

Commit Message

每次提交 Commit Message包含三个部分 Header,Body,Footer。Header 是必需的，另外俩可以省略

<head>
// 空一行
<body>
// 空一行
<footer>

npm install -g commitizen # 安装
commitizen init cz-conventional-changelog --save --save-exact

Head

head由三个部分构成，type和subject必填，scope选填

<type>(<scope>): <subject>

type用于说明commit的类型

feat：新功能（feature）
fix：修补bug
docs：文档（documentation）
style： 格式（不影响代码运行的变动）
refactor：重构（即不是新增功能，也不是修改bug的代码变动）
test：增加测试
chore：构建过程或辅助工具的变动
revert: 代码回滚
build: 影响系统构建或者外部依赖的更改（例如：glup，npm, broccoli）
ci: 对CI配置文件和脚本的修改
perf:性能提升

scope用于说明commit影响的范围，比如数据层，控制层，视图层等，或者目录，比如: route, component, utils, build等

subject是提交内容的简单描述

Body

提交信息的详细描述

Footer

只用于两种情况，发生重大改变与上一个版本不兼容，或者关闭某些issue

当发生改变时，需要在body里面进行描述

关闭issue

提交校验钩子

npm i lint-staged husky commitlint @commitlint/config-conventional -save-dev
# 注意这里使用 husky7版本，与之前的版本有很大不同

• husky ：git hooks工具
• lint-staged: 检测暂存区文件
• commitlint:部分项目下载的是@commitlint/cli二者是一个东西，任意都行
• @commitlint/config-conventional校验的拓展，自定义校验规范

在package.json中配置命令，在执行npm install 命令之后回自动执行husky install

"scripts": {
    "prepare": "husky install"
}

执行npm install 或者手动执行npm run prepare之后，会生成一个.husky文件夹

执行两个命令创建文件

npx husky add .husky/pre-commit "npx lint-staged"
npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"' 

然后会在.husky文件夹中创建两个钩子文件commit-msg，pre-commit

• pre-commit: 就是git commit 之前走的钩子,一般我们在这里去处理暂存区的文件，比如格式化代码，eslint fix代码等
• commit-msg: 就是git commit msg的时候去触发对应的逻辑,一般我们在这里验证commit msg的验证

创建commitlint.config.js

module.exports = {extends: ['@commitlint/config-conventional']};

echo "module.exports = {extends: ['@commitlint/config-conventional']};" > commitlint.config.js

创建.lintstagedrc.json

commit时触发钩子执行该文件的命令

{
  "*.{js,jsx,ts,tsx}": ["eslint  --fix", "prettier --write"],
  "*.md": ["prettier --write"],
  "*.{scss,less,styl,html}": ["stylelint --fix", "prettier --write"],
  "*.vue": ["eslint --fix", "prettier --write", "stylelint --fix"]
}

生成CHANGELOG.md

 npm install -g conventional-changelog-cli
 #或者
 npm install -g conventional-changelog # 下载这个不好用，也没仔细找问题，两个都试试

package.josn中配置命令

"scripts": {
    "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s" 
}

这个命令不会覆盖CHANGELOG.md文档，只会在文档前面新增

如果生成所有发布的CHANGELOG.md, 则运行

"scripts": {
    "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0" 
}

踩坑

• stylelint报错

  • 错误信息：

    Unknown word  CssSyntaxError
    

  • 原因： stylelint@14版本对于vue3版本支持度不高

  • 解决方法：降低stylelint版本为@13.13.1

• .prerttierrc文件本地格式化配置文件，eslint以该文件为标准进行语法修复，修复完成仍出警告或错误时，大概率是项目配置的eslint和prettier与vscode安装的插件eslint和prettier有冲突，此时应该去解决冲突，一般来说，当我们下载玩vscode的插件时，应该就已经配置好代码风格，所以通常去更改项目的配置去适应vscode插件中的eslint，但是反过来操作也行，如果更改setting.json，更改完成之后重启vscode避免不生效

  文件 -->首选项 -->设置 -->侧边栏扩展-->ESlint-->打开setting,json文件
  

  

• lint-staged

  • 错误信息:

      import { figures } from 'listr2'
      ^^^^^^^
      SyntaxError: The requested module 'listr2' does not provide an export named 'figures'
    

  • 原因：版本问题

  • 解决方法：下载styleling@11.2.4

• commitlint.config.js文件控制台报错乱码

  • 错误信息：一堆乱码错误
  • 原因：命令行创建的文件编码格式有误
  • 解决方案：更改编码格式为utf-8

重要提示：

注意版本问题！注意版本问题！注意版本问题！