安装步骤
安装配置eslint
- 安装依赖eslint prettier
npm i eslint@7.0.1 -D
- eslint初始化
初始化时，会选择一些配置选项，参照如下文档选择即可
选项选择：blog.csdn.net/m0_64564920…
npx eslint --init
- 在根目录创建.eslintignore（如果有该文件，把下面内容加入到该文件即可）
/build/
/dist
/node_modules
/*.js
/public
- 在根目录创建.eslintrc.js（如果有该文件，则覆盖即可）
module.exports = {
env: {
browser: true,
node: true,
},
extends: [
"eslint:recommended",
"plugin:vue/essential"
],
overrides: [
{
env: {
node: true
},
files: [
".eslintrc.{js,cjs}"
],
parserOptions: {
sourceType: "script"
}
}
],
parserOptions: {
ecmaVersion: 12,
sourceType: "module",
allowImportExportEverywhere: true, // 不限制eslint对import使用位置
ecmaFeatures: {
modules: true,
legacyDecorators: true
}
},
plugins: [
"vue"
],
rules: {
'max-lines': ['error', {max: 800}], // 可根据实际情况，决定是否配置该项目；限制每次提交行数少于800行
'max-lines-per-function': ['error', {max: 200}], // 可根据实际情况，决定是否配置该项目；限制每个函数的代码行数少于200行
'no-var': 'error', // 可根据实际情况，决定是否配置该项目；不允许使用var声明变量；
'no-console': 'error', // 可根据实际情况，决定是否配置该项目；不允许打印console；
'no-use-before-define': ['error'],
'no-unused-vars': ['warn']
}
}
安装配置prettier
- 安装依赖prettier
npm i prettier -D
- 根目录下，新建.prettierrc 文件
- .prettierrc文件 配置
{
"printWidth": 100,
"tabWidth": 2,
"useTabs": false,
"semi": true,
"singleQuote": true,
"trailingComma": "none",
"bracketSpacing": true,
"bracketSameLine": true,
"arrowParens": "always",
"htmlWhitespaceSensitivity": "ignore",
"vueIndentScriptAndStyle": false,
"endOfLine": "auto",
"singleAttributePerLine": false
}
- prettier 配置详解
{
"printWidth": 100, //每行最多显示的字符数
"tabWidth": 2,//tab的宽度 2个字符
"useTabs": false,//禁止使用tab代替空格
"semi": true,//结尾使用分号
"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 //组件或者标签的属性是否控制一行只显示一个属性
}
安装配置lint-staged
- 安装依赖lint-staged
npm i lint-staged@11.0.0 -D
- 在package.json文件下添加如下代码
"lint-staged": {
"src/**/*.{js,jsx,ts,tsx,json,vue}": [
"prettier --config .prettierrc --write",
"eslint --fix",
"git add"
]
}
安装配置commitlint
- 安装commitlint相关依赖
用来帮助我们在多人开发时，遵守 git 提交约定（这里如果安装报错，把eslint降级为7.0.1进行安装）
npm i @commitlint/cli @commitlint/config-conventional -D
- 在根目录创建 commitlint.config.js 文件，其内容如下：
// eslint-disable-next-line no-undef
module.exports = {
extends: [
"@commitlint/config-conventional"
],
// 以下时我们自定义的规则
rules: {
'type-enum': [
2,
'always',
[
'bug', // 此项特别针对bug号，用于向测试反馈bug列表的bug修改情况
'feat', // 新功能（feature）
'fix', // 修补bug
'docs', // 文档（documentation）
'style', // 格式（不影响代码运行的变动）
'refactor', // 重构（即不是新增功能，也不是修改bug的代码变动）
'test', // 增加测试
'chore', // 构建过程或辅助工具的变动
'revert', // feat(pencil): add ‘graphiteWidth’ option (撤销之前的commit)
'merge' // 合并分支， 例如： merge（前端页面）： feature-xxxx修改线程地址
]
]
}
};
安装配置husky
- 安装git hooks工具：husky
npm i husky@7.0.1 -S -D
- 初始化 husky
npx husky install && npm pkg set scripts.prepare="husky install"
- Add commit-msg hook
npx husky add .husky/commit-msg "npx --no-install commitlint --edit \"\$1\""
运行后根目录下.husky文件夹下将多出一个commit-msg文件：
#!/bin/sh
. "$(dirname -- "$0")/_/husky.sh"
npx --no-install commitlint --edit "$1"
- Add pre-commit hook
npx husky add .husky/pre-commit "npx --no-install lint-staged --allow-empty \"\$1\""
运行后根目录下.husky文件夹下将多出一个pre-commit文件：
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
npx --no-install lint-staged --allow-empty "$1"
