vue工具之配置eslint(语法校验)，prettier(代码格式化)，stylelint(css 的格式化)，commitlint(提交规范)

一、配置 eslint

ESLint 是一款插件，主要用来检测编写的（ JavaScript ）代码是否符合规范。当然在一个团队中也会自定义一些规范条件。另外正常情况下我们不需要单独安装 ESLint 去使用,例如 vite 脚手架搭建的项目一般都是帮你集成好了。

1. 安装并使用

⏰ 前提条件：内置 SSL 支持的 Node.js 版本（^12.22.0、^14.17.0 或 >=16.0.0），如果你使用的是官方 Node.js 发行版，那么已经内置了 SSL 支持。

npm init @eslint/config

🔊：如果你想使用托管在 npm 上的指定可共享配置，你可以使用 --config 选项并指定包名：

# 使用 `eslint-config-semistandard` 可共享配置
# npm 6.x
npm init @eslint/config --config semistandard

# ⚠️ npm 7+ 需要使用额外的双杠：
npm init @eslint/config -- --config semistandard
# 或（可以省略 `eslint-config` 前缀）
npm init @eslint/config -- --config eslint-config-semistandard

--config 标志也支持传递数组

npm init @eslint/config -- --config semistandard,standard
# 或
npm init @eslint/config -- --config semistandard --config standard

！！！注意：使用 npm init @eslint/config 时，运行目录需要已经有 package.json 文件了。如果还没有该文件，请确保在此之前运行 npm init 或 yarn init。

⬇️：在此之后，你可以像这样使用 ESLint 检查任一文件或目录：

npx eslint yourfile.js
# 或
yarn run eslint yourfile.js

也可以全局安装 ESLint 而不仅限于本地（使用 npm install eslint --global）。但并不推荐这样做，因为无论使用哪种安装方式，你都需要在本地安装插件和可共享配置。

2. 配置

在运行 npm init @eslint/config 后，你的目录下会有 .eslintrc.{js,yml,json} 文件。在里面你可以看到类似于这样的一些已经配置好了的规则：

{
    "rules": {
        "semi": ["error", "always"],
        "quotes": ["error", "double"]
    }
}

"semi" 和 "quotes" 是 ESLint 规则的名称。第一个值代表规则的错误级别，有以下几种可供选择：

"off" 或 0 - 关闭该规则
"warn" 或 1 - 启用并警告（不影响现有代码）
"error" 或 2 - 启用并报错（错误代码 1）

你可以调节这三档错误级别以精准控制 ESLint 规则实施方式（更多配置项和细节，参见配置文档）。

你的 .eslintrc.{js,yml,json} 配置文件也会包括这一行：

{
    "extends": "eslint:recommended"
}

这一行将启用所有标记为“推荐”的规则。另外，你也可以通过在 npmjs.com 上搜索“eslint-config”并使用别人创建的配置。在没有使用别人的可共享配置或在配置中明确启用规则时，ESLint 不会检查你的代码。

二、配置 prettier

在我们的项目中，eslint 应主要负责校验语法校验，prettier 应主要负责代码格式化。同eslint一样，我们不需要单独安装 ESLint 去使用,例如 vite 脚手架搭建的项目一般都是帮你集成好了。

1. 安装

☘️npm

npm install --save-dev --save-exact prettier

☘️yarn

yarn add --dev --exact prettier

☘️pnpm

pnpm add --save-dev --save-exact prettier

2. 新建 prettier 配置文件

根目录下新建 .prettierrc.json 文件，并填入如下代码：

{
"printWidth": 100,
"tabWidth": 2,
"useTabs": true,
"semi": false,
"singleQuote": true,
"trailingComma": "none",
"bracketSpacing": true,
"bracketSameLine": true,
"arrowParens": "always",
"htmlWhitespaceSensitivity": "ignore",
"vueIndentScriptAndStyle": false,
"endOfLine": "auto",
"singleAttributePerLine": false
}

各文件说明：

{
"printWidth": 100, //每行最多显示的字符数
"tabWidth": 2,//tab的宽度 2个字符
"useTabs": true,//使用tab代替空格
"semi": false,//结尾使用分号
"singleQuote": true,//使用单引号代替双引号
"trailingComma": "none",//结尾是否添加逗号
"bracketSpacing": true,//对象括号俩边是否用空格隔开
"bracketSameLine": true,;//组件最后的尖括号不另起一行
"arrowParens": "always",//箭头函数参数始终添加括号
"htmlWhitespaceSensitivity": "ignore",//html存在空格是不敏感的
"vueIndentScriptAndStyle": false,//vue 的script和style的内容是否缩进
"endOfLine": "auto",//行结尾形式 mac和linux是\n windows是\r\n
"singleAttributePerLine": false //组件或者标签的属性是否控制一行只显示一个属性
}

三、配置stylelint

stylelint 是 css 的格式化工具。可格式化css代码、检查css语法错误与不合理的写法，指定css书写顺序等。

1. 安装 stylelint

使用 npm 安装 Stylelint 及其标准配置：

npm install --save-dev stylelint stylelint-config-standard

2. 配置文件

在项目的根目录中创建 .stylelintrc.json 配置文件，并写入以下内容：

{
  "extends": "stylelint-config-standard"
}

3.处理项目中CSS文件

npx stylelint "**/*.css"

四、配置commitlint

在多人协作的背景下，git 仓库和 workflow 的作用很重要。而对于 commit 提交的信息说明存在一定规范，现使用 commitlint + husky 规范 git commit -m "" 中的描述信息。

⏰ 一句话说，当我们运行 git commmit -m 'xxx' 时，用来检查 xxx 是否满足固定格式的工具。简单来说，就是制定提交规范。

1. husky 安装

Husky 能让你更简单地使用Git hooks。它能阻止不合格的git commit，git push操作。webpack、babel、create-react-app、antd都使用了husky。

☘️ 第一步：项目内安装

！！！由于未知原因，只能用npm来安装配置husky（yarn/pnpm会报错）

！！！执行此命令前，要先 git init 或者是先将本项目链接到远程仓库(github、gitee等)

npm i lint-staged husky -save-dev

lint-staged 是一个可以提供运行脚本校验文件的插件平台；可以根据不同文件执行不同的命令。
lint-staged 是一个仅仅过滤出Git代码暂存区文件(被committed的文件)的工具，并不像eslint那样需要配置忽略配置、配置内的文件全量遍历检查。

☘️ 第二步：创建.husky/目录并指定该目录为git hooks所在的目录

package.json中增加prepare命令，顺便设置下lint-staged命令：

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

"lint-staged": {
  "*.{js,jsx,vue,ts,tsx}": [
    "eslint --fix"
  ]
}

prepare脚本会在执行 npm install 之后自动执行。也就是说当我们执行 npm install 安装完项目依赖后会执行 husky install 命令。

或者采用命令行方式：

npm run prepare

☘️ 第三步：在.husky文件夹下增加pre-commit文件：

在.husky文件夹下新建pre-commit文件，并写入以下内容：

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npx lint-staged

或者使用以下命令生成：

$ npx husky add .husky/pre-commit "npx lint-staged"

！！！注意1：如果 “add command is deprecated”，则表明已经弃用add，这个时候就通过上面手动配置就行。

！！！注意2："npx lint-staged" 命令根据你自己项目中script脚本而定，eslint --ext .js,.vue src在lint脚本中

2. commitlint 安装与配置

🔊：配置 git 提交时的 commit 信息，统一提交 git 提交规范

☘️ 1. 安装 commitlint

npm add @commitlint/config-conventional @commitlint/cli -D

☘️ 2. 新建 commitlint 配置文件

在项目根目录下新建 commitlint.config.cjs 文件，并填入如下代码：

module.exports = {
  extends: ['@commitlint/config-conventional'],
  // 校验规则
  rules: {
    'type-enum': [
      2,
      'always',
      [
        'feat',
        'fix',
        'docs',
        'style',
        'refactor',
        'perf',
        'test',
        'chore',
        'revert',
        'build',
      ],
    ],
    'type-case': [0],
    'type-empty': [0],
    'scope-empty': [0],
    'scope-case': [0],
    'subject-full-stop': [0, 'never'],
    'subject-case': [0, 'never'],
    'header-max-length': [0, 'always', 72],
  },
}

配置说明：

'feat',     //新特性、新功能
'fix',      //修改bug
'docs',     //文档修改
'style',    //代码格式修改, 注意不是 css 修改
'refactor', //代码重构
'perf',     //优化相关，比如提升性能、体验
'test',     //测试用例修改
'chore',    //其他修改, 比如改变构建流程、或者增加依赖库、工具等
'revert',   //回滚到上一个版本
'build',    //编译相关的修改，例如发布版本、对项目构建或者依赖的改动

☘️ 3. 添加脚本

在 packjson.json 文件的 script 字段中添加命令

 "commitlint": "commitlint --config commitlint.config.cjs -e -V"

☘️ 4.在 husky文件夹下创建 “commit-msg”文件

在根目录下 husky文件夹中的 commit-msg中添加如下命令

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npm commitlint

☘️ 5. 提交规范

提交示范：git commit -m 'feat: 新增商品页查询功能’
此处并非只能用 feat 作为前缀，还能使用其他前缀，详情见步骤2

posted on 2024-10-22 18:30 梁飞宇阅读(1878) 评论(0) 收藏举报

刷新页面返回顶部

梁飞宇