项目的相关规范性配置总结

啊丫丫2023-12-30 10:26

项目的相关规范性配置（eslint|prettier|husky|lint-staged|stylelint等）

目的： 检测代码质量和代码格式，对编辑器进行相关设置，提交的时候进行代码检查以及提交规范设置 包括： eslint、prettier、husky、lint-staged、stylelint等

一、eslint

1、eslint简介

eslint作用：它是一个js代码检测工具，主要检测以下问题：

  • 未使用的变量
  • 未定义的引用
  • 比较时使用三等
  • 禁止不必要的括号等等 通过配置eslint，可以在开发的时候在语法不正确的地方进行提示并提供建议进行修复。

2、配置

  • 添加eslint依赖
shell 复制代码 
npm i eslint -D
# or
yarn add eslint -D

  • 添加配置（可在package.json中直接配置eslintConfig项或者初始化.eslintrc.*文件来配置）

    • 在package.json中配置
    json 复制代码 
    "eslintConfig": {
  "root": true,
  "env": {
    "node": true
  },
  "extends": [
    "plugin:vue/essential",
    "eslint:recommended",
    "@vue/standard"
  ],
  "parserOptions": {
    "parser": "@babel/eslint-parser"
  },
  "rules": {}
}
    • 初始化.eslintrc.*文件（这里初始化为js文件） 初始化文件，根据提示和自己的项目依次进行选择，选择完成后生成一个.eslintrc.js文件
    shell 复制代码 
    npx eslint --init

    具体.eslintrc.js配置（这里是Vue的项目，所以会引入Vue的Plugin）

    javascript 复制代码 
    module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: ['plugin:vue/essential', 'eslint:recommended', '@vue/standard'],
  parserOptions: {
    parser: '@babel/eslint-parser',
  },
  rules: {},
  plugins: ['vue'],
};
    • 在package.json中添加脚本命令（一般用cli构建的项目可能已有相关命令） 以下为用vue-cli构建的项目中的lint命令
    json 复制代码 
    "scripts": {
  "lint": "vue-cli-service lint",
}

    一般自定义命令如下

    json 复制代码 
    "scripts": {
  "lint": "eslint --fix"
}

    执行npm run lint 或yarn run lint 可对代码进行js检查

    • 配置.eslintignore文件（指定相关文件、文件夹忽略js代码检测）

      node_modules
      dist
      .vscode

    • 如果在同一目录下存在多个配置文件，ESLint 将按照以下优先顺序只使用其中一个（并不会进行合并配置）：

      1. .eslintrc.js
      2. .eslintrc.cjs （需要在 package.json 中指定 "type":"module"）
      3. .eslintrc.yaml
      4. .eslintrc.yml
      5. .eslintrc.json
      6. package.json

3、插件与vscode设置

进行了以上eslint配置后，我们暂且做到的是可以手动去执行npx eslint lint命令去对我们的代码进行检测是否符合规范的，同时还可以使用--fix参数去手动修复。 但是试想一下，在实际代码开发的过程中，每写几行代码，就得手动执行一下这个命令，那得多麻烦呀，很显然，这不是最佳实践。 那到底如何做呢？答案就是在编辑器中引入eslint插件。

  • 在vscode中使用eslint扩展插件 安装了插件之后，对相关文件可以点击右键【使用...格式化文档】，进行eslint文档格式化

  • 进行vscode设置（根目录.vscode下的settings.json文件） 启用eslint格式化能力、启用自动代码修复功能

    json 复制代码 
    {
  // 启用 eslint 的格式化能力
  "eslint.format.enable": true,
  // eslint 会在检查出错误时，给出对应的文档链接地址
  "eslint.codeAction.showDocumentation": {
    "enable": true
  },
  // 指定 eslint 生效的文件类型(尤其是 vue 文件)。
  "eslint.probe": ["javascript", "typescript", "vue"],
  // 指定 eslint 的工作区，使每个子模块下的 .eslintignore 文件都能对当前目录生效。
  "eslint.workingDirectories": [{ "mode": "auto" }],

  // 启用自动代码修复功能，保存时触发 eslint 和 stylelint 的自动修复。
  "editor.codeActionsOnSave": {
    "source.fixAll": true,
    "source.fixAll.eslint": true
  }
}

  • 若无根目录.vscode，则进行以下操作

    • 快捷键 ctr + shift + p 进入窗口，键入user，选择【preferences: open user settings】并进入用户设置页面，
    • 用户设置页面 有两个Tab，分别是User和Workspace，这两个都是对VsCode进行配置的，其中User是对用户进行配置，可以理解为全局配置，在User里的配置项会对所有VsCode打开的文件有效。Workspace的配置只对当前工作目录有效，如果你改了Workspace里的配置，那么VsCode会在当前打开的目录下新建一个.vscode目录用来保存做的修改，Workspace里配置的优先级大于User里配置的优先级。
    • 修改Workspace中的eslint.enable配置是的项目根目录出现.vscode文件夹
    • 根据上文进行settings.json文件的配置

二、prettier

1、prettier简介

Prettier是一款纯粹的代码格式化工具 ，很显然，它的作用就是：格式化，不关系代码语法等问题。 比如常见格式化问题：

  • 代码缩紧
  • 单引号与双引号等等

2、配置

  • 添加prettier依赖

    shell 复制代码 
    npm i prettier -D
# or
yarn add prettier -D

  • prettier与eslint冲突解决 由于eslint和prettier有部分规则是冲突的，但是在实际项目中，两者又都需要，那如何解决冲突的这部分问题呢？eslint因此推出了eslint-plugin-prettier 插件，也就是说把prettier做成eslint的一个插件，然后引入到eslint中，会用prettier把eslint冲突的那部分覆盖掉。但是我们整体的代码格式化使用的是eslint。

    shell 复制代码 
      npm i eslint-config-prettier eslint-plugin-prettier --save-dev
  # or
  yarn add  eslint-config-prettier eslint-plugin-prettier -D

  • 创建根目录 .prettierrc 配置文件 具体配置

    json 复制代码 
    {
  "trailingComma": "es5",
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true
}

  • 修改 eslint配置

    javascript 复制代码 
    module.exports = {
  // ...省略一些配置
  extends: [
    // ...省略一些配置
    'plugin:prettier/recommended', //关键点
  ],
};

  • 创建根目录 .prettierignore文件 忽略一些不需要prettier检查的文件、文件夹

    .yarn
dist
node_modules

3、插件与vscode设置

  • 插件 Prettier-code formatter插件

  • settings.json中添加

    json 复制代码 
    {
  // 设置默认格式化工具为 Prettier
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

三、husky、commitlint

1、husky简介

规范化git commit 与git push等。 Husky是一个用于在git进程的不同阶段运行脚本的工具。 当我们提交git的时候，会触发一些钩子，我们可以在这些钩子里做一些检查，如果检查不通过那么不执行对应的提交操作， husky就是用来方便我们写钩子函数的，相关的文档可以看这个。

2、配置

  • 添加husky依赖

    shell 复制代码 
      npm i husky -D
  # or
  yarn add husky -D

  • 在package.json中添加【prepare】脚本

    shell 复制代码 
    npm pkg set scripts.prepare="husky install"

    执行上述命令完毕后，package.json中脚本会添加如下：

    json 复制代码 
    {
  "scripts": {
    "prepare": "husky install"
  }
}

  • 执行命令初始化 .husky文件夹

    shell 复制代码 
      npm run prepare
  # or
  yarn add prepare

  • 执行命令，对git提交前的钩子pre-commit进行设置

    shell 复制代码 
    npx husky add .husky/pre-commit "yarn run lint"

    执行这个命令后会生成.husky/pre-commit文件，相关内容如下

    bash 复制代码 
    #!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

yarn run lint

    上述pre-commit文件内容表示在执行git commit命令的时候，会先执行yarn run lint，这个命令通过了才会执行commit操作，否则中止commit操作。

  • 执行命令，对git pre-push钩子进行设置

    shell 复制代码 
    npx husky add .husky/pre-push "yarn build"

    执行这个命令后会生成.husky/pre-push文件，相关内容如下

    bash 复制代码 
    #!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

yarn build

    上述pre-push文件内容表示在执行git push命令的时候，会先执行yarn build，这个命令通过了才会执行push操作，否则中止push操作， 通过这个设置我们可以确保推上去的代码是可构建成功的。

3、与husky结合使用的commitlint

使用commitlint可以对团队的提交信息格式进行规范化。 husky在commit-msg这个git钩子里触发commitlint校验。

  • 添加相关依赖

    shell 复制代码 
    npm i -D @commitlint/config-conventional @commitlint/cli
# or
yarn add -D @commitlint/config-conventional @commitlint/cli

  • 执行命令，对git commit-msg钩子进行设置

    shell 复制代码 
    npx husky add .husky/commit-msg  'npx --no -- commitlint --edit ${1}'
# Sometimes above command doesn't work in some command interpreters
# You can try other commands below to write npx --no -- commitlint --edit $1
# in the commit-msg file.
npx husky add .husky/commit-msg \"npx --no -- commitlint --edit '$1'\"
# or
npx husky add .husky/commit-msg "npx --no -- commitlint --edit $1"

    执行这个命令后会生成.husky/commit-msg文件，相关内容如下

    bash 复制代码 
    #!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npx --no -- commitlint --edit $1

    由此，在提交代码时。会现有commitlint校验提交信息是否规范，如若不规范则会提交失败。

  • commitlint设置 一般，在添加了依赖后，其会使用默认规范设置，但为了避免遗忘提交信息的前缀，这里将这些前缀信息列举在 commitlint.config.js文件中

    javascript 复制代码 
    // build: Changes that affect the build system or external dependencies (example scopes: gulp, broccoli, npm)
// ci: Changes to our CI configuration files and scripts (example scopes: Travis, Circle, BrowserStack, SauceLabs)
// docs: Documentation only changes
// feat: A new feature
// fix: A bug fix
// perf: A code change that improves performance
// refactor: A code change that neither fixes a bug nor adds a feature
// style: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)
// test: Adding missing tests or correcting existing tests

module.exports = {
  extends: ['@commitlint/config-conventional'],
  rules: {
    'body-leading-blank': [1, 'always'],
    'body-max-line-length': [2, 'always', 100],
    'footer-leading-blank': [1, 'always'],
    'footer-max-line-length': [2, 'always', 100],
    'header-max-length': [2, 'always', 100],
    'scope-case': [2, 'always', 'lower-case'],
    'subject-case': [
      2,
      'never',
      ['sentence-case', 'start-case', 'pascal-case', 'upper-case'],
    ],
    'subject-empty': [2, 'never'],
    'subject-full-stop': [2, 'never', '.'],
    'type-case': [2, 'always', 'lower-case'],
    'type-empty': [2, 'never'],
    'type-enum': [
      2,
      'always',
      [
        'build',
        'chore',
        'ci',
        'docs',
        'feat',
        'fix',
        'perf',
        'refactor',
        'revert',
        'style',
        'test',
        'translation',
        'security',
        'changeset',
      ],
    ],
  },
};

5、与husky结合使用的lint-staged

lint-staged 一般结合 husky 来使用，它可以让 husky 的 hook 触发的命令只作用于 git 暂存区的文件，而不会影响到其他文件。 由此可以避免当我们下载了一个库、只改了一个文件，可是commit的时候却格式化了一大堆文件。可参考这个文档

  • 添加相关依赖

    shell 复制代码 
    npm i -D lint-staged
# or
yarn add -D lint-staged

  • 在package.json中添加lint-staged相关配置

    json 复制代码 
    {
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": ["eslint --fix"],
    "*.vue": ["eslint --fix"],
    "*.{html,vue,vss,sass,less}": ["prettier --write"],
    "package.json": ["prettier --write"],
    "*.md": ["prettier --write"]
  }
}

  • 修改pre-commit文件

    bash 复制代码 
    #!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npx lint-staged

    每次在执行git commit的时候，都会先调用npx lint-staged进行检查

四、vscode编辑器的设置

json 复制代码 
// 编辑器相关设置
{
  "typescript.tsdk": "node_modules/typescript/lib",
  // 关闭 IDE 自带的样式验证
  "css.validate": false,
  "less.validate": false,
  "scss.validate": false,
  // 指定 stylelint 生效的文件类型(尤其是 vue 文件)。
  "stylelint.validate": ["css", "scss", "postcss", "vue"],

  // 启用 eslint 的格式化能力
  "eslint.format.enable": true,
  // eslint 会在检查出错误时，给出对应的文档链接地址
  "eslint.codeAction.showDocumentation": {
    "enable": true
  },
  // 指定 eslint 生效的文件类型(尤其是 vue 文件)。
  "eslint.probe": ["javascript", "typescript", "vue"],
  // 指定 eslint 的工作区，使每个子模块下的 .eslintignore 文件都能对当前目录生效。
  "eslint.workingDirectories": [{ "mode": "auto" }],

  // 设置默认格式化工具为 Prettier
  "editor.defaultFormatter": "esbenp.prettier-vscode",

  // 默认禁用自动格式化(手动格式化快捷键：Shift + Alt + F)
  "editor.formatOnSave": false,
  "editor.formatOnPaste": false,

  // 启用自动代码修复功能，保存时触发 eslint 和 stylelint 的自动修复。
  "editor.codeActionsOnSave": {
    "source.fixAll": true,
    "source.fixAll.eslint": true,
    "source.fixAll.stylelint": true
  },

  // volar 可以处理 vue 文件的格式化
  "[vue]": {
    "editor.defaultFormatter": "Vue.volar"
  },

  // json、yaml 等配置文件保存时自动格式化
  "[json]": {
    "editor.formatOnSave": true
  },
  "[jsonc]": {
    "editor.formatOnSave": true
  },
  "[yaml]": {
    "editor.formatOnSave": true
  },

  // 行尾默认为 LF 换行符而非 CRLF
  "files.eol": "\n",

  // 键入 Tab 时插入空格而非 \t
  "editor.insertSpaces": true,

  // 缩进大小：2
  "editor.tabSize": 2,

  // 自动补充闭合的 HTML 标签
  "html.autoClosingTags": true
}
  • extensions.json
json 复制代码 
// 插件推荐设置
{
  "recommendations": [
    "vue.volar",
    "vue.vscode-typescript-vue-plugin",
    "esbenp.prettier-vscode",
    "stylelint.vscode-stylelint",
    "dbaeumer.vscode-eslint"
  ]
}

五、stylelint

样式规范配置

1、相关依赖插件

运行命令安装依赖，项目用的是less，故安装的是less相关的样式规范插件，具体安装的依赖 依项目而定。

shell 复制代码 
yarn add stylelint postcss-html stylelint-config-recommended-vue  stylelint-config-standard-less stylelint-config-recess-order @stylistic/stylelint-plugin  -D

2、新建并配置.stylelintrc.js文件 和创建.stylelintignore文件

具体如下

javascript 复制代码 
// 样式代码检查规则配置文件
module.exports = {
  // 继承的预设，这些预设包含了规则集插件
  extends: [
    // 基本 less 规则
    'stylelint-config-standard-less',
    // vue 规则
    'stylelint-config-recommended-vue',
    // 样式属性顺序规则
    'stylelint-config-recess-order',
    // 代码风格规则
    '@stylistic/stylelint-plugin',
  ],
  // 识别html文件中的样式
  overrides: [
    {
      files: ['*.html', '**/*.html'],
      customSyntax: 'postcss-html',
    },
  ],
};

.stylelintignore文件

node_modules
dist

3、增加脚本运行命令，自定义开启\禁用规则集

在package.json中增加脚本运行命令

json 复制代码 
{
  "scripts": {
    "lint:style": "stylelint --fix ./**/*.{css,scss,vue,html}"
  }
}

运行脚本命令检查样式

shell 复制代码 
yarn lint:style

根据项目以及样式报错情况，在.stylelintrc.js中自定义开启\禁用规则集，如：

javascript 复制代码 
module.export = {
  // ...省略一些设置
  rules: {
    // 自定义规则集的启用 / 禁用
    'no-empty-source': null, // 值为null表示禁用原规则 空样式文件不报错
    'at-rule-no-unknown': null, // 引入第三方样式插件如tailwindcss不报错
    'selector-class-pattern': null, // 设置第三方ui组件样式时，形如.el-radio-button__inner的类名不报错。或者可以自定义类选择器的格式
  },
};

4、安装vscode stylelint插件并开启样式自动修复功能、设置提交前置样式校验

  • stylelint-vscode插件

  • 设置settings.json

    json 复制代码 
    {
  // 启用自动代码修复功能，保存时触发 eslint 和 stylelint 的自动修复。
  "editor.codeActionsOnSave": {
    "source.fixAll": true,
    "source.fixAll.eslint": true,
    "source.fixAll.stylelint": true
  }
}

  • 提交前置样式校验 在package.json的lint-staged中给对应的文件 设置样式检查（husky中的pre-commit已设置执行lint-staged校验，故在package中添加样式校验命令即可），具体如下

    json 复制代码 
    {
  "lint-staged": {
    "src/**/*.{js,jsx,ts,tsx,vue}": ["prettier --write", "eslint --fix"],
    "src/**/*.{vue,scss,css,sass,less,html}": [
      "stylelint --fix", // new
      "prettier --write"
    ],
    "package.json": ["prettier --write"],
    "*.md": ["prettier --write"]
  }
}
相关推荐
qbbmnnnnnn11 分钟前
【CSS Tricks】如何做一个粒子效果的logo
前端·css
唐家小妹12 分钟前
【flex-grow】计算 flex弹性盒子的子元素的宽度大小
前端·javascript·css·html
涔溪14 分钟前
uni-app环境搭建
前端·uni-app
安冬的码畜日常18 分钟前
【CSS in Depth 2 精译_032】5.4 Grid 网格布局的显示网格与隐式网格（上）
前端·css·css3·html5·网格布局·grid布局·css网格布局
洛千陨18 分钟前
element-plus弹窗内分页表格保留勾选项
前端·javascript·vue.js
小小199220 分钟前
elementui 单元格添加样式的两种方法
前端·javascript·elementui
前端没钱40 分钟前
若依Nodejs后台、实现90%以上接口，附体验地址、源码、拓展特色功能
前端·javascript·vue.js·node.js
爱喝水的小鼠1 小时前
AJAX(一）HTTP协议(请求响应报文)，AJAX发送请求，请求问题处理
前端·http·ajax
叫我：松哥1 小时前
基于机器学习的癌症数据分析与预测系统实现，有三种算法，bootstrap前端+flask
前端·python·随机森林·机器学习·数据分析·flask·bootstrap
让开，我要吃人了1 小时前
HarmonyOS鸿蒙开发实战（5.0）网格元素拖动交换案例实践
前端·华为·程序员·移动开发·harmonyos·鸿蒙·鸿蒙开发
热门推荐
01RAG 实践- Ollama+RagFlow 部署本地知识库02组基轨迹建模 GBTM的介绍与实现（Stata 或 R）032024年高教社杯数学建模国赛C题超详细解题思路分析04CCF-CSP认证考试 202406-3 文本分词 100分题解05苍穹外卖面试总结06【2024数模国赛赛题思路公开】国赛B题思路丨附可运行代码丨无偿自提07软件工程从理论到实践客观题汇总(头歌第一章至第八章)08yolov8实战第五天——yolov8+ffmpg实时视频流检测并进行实时推流——（推流，保姆教学）09【2024高教社杯全国大学生数学建模竞赛】B题 生产过程中的决策问题——解题思路 代码 论文10实战 | 基于YOLOv9和OpenCV实现车辆跟踪计数（步骤 + 源码）