Eslint+stylelint+prettier+commitlint规范项目开发

·  阅读 830

写在开头

项目地址: 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,FooterHeader 是必需的,另外俩可以省略

<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的类型

image-20211116153036906

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等

image-20211116153117512

subject是提交内容的简单描述

image-20211116153151301

Body

提交信息的详细描述

image-20211116153202830

Footer

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

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

image-20211116153507931

关闭issue

image-20211116153726951

提交校验钩子

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文件夹

image-20211117153120928

执行两个命令创建文件

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

然后会在.husky文件夹中创建两个钩子文件commit-msgpre-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和prettiervscode安装的插件eslint和prettier有冲突,此时应该去解决冲突,一般来说,当我们下载玩vscode的插件时,应该就已经配置好代码风格,所以通常去更改项目的配置去适应vscode插件中的eslint,但是反过来操作也行,如果更改setting.json,更改完成之后重启vscode避免不生效

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

    image-20211122102127728

  • 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

重要提示:

注意版本问题!注意版本问题!注意版本问题!

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改