vue2项目配置prettier + eslint + commitlint + stylelint
vue2项目配置prettier+eslint+styleint
·
目录
2.2、项目根目录自动新增commitlint.config.js文件，配置如下
3.1、安装eslint-config-prettier、eslint-plugin-prettier、lint-staged
3.3、根目录新增lint-staged.config.js文件，配置如下：
3.5、配置.eslintignore文件，这个文件是配置哪些文件不需要eslint检测的，所以可以根据自己项目自行配置此文件，配置如下：
3.6、package.json文件配置lint脚本检测代码
4.2、添加.prettierignore，可以根据项目需要，自行配置
4.3、lint-staged-config.js文件修改如下
1、全局安装vue、vue-cli
vue2的项目，必须使用vue2对应得vue-cli的版本，vue-cli4.5以上对应的就是vue3了，所以：
npm install -g vue@2.7.10
npm install -g @vue/cli@4.4.6
2、安装commitlint
vue add commitlint
执行完以后项目分别有以下变化
2.1、package.json中自动会新增如下配置
2.2、项目根目录自动新增commitlint.config.js文件，配置如下
3、添加eslint提交检测
3.1、安装eslint-config-prettier、eslint-plugin-prettier、lint-staged
npm install --save-dev eslint-config-prettier eslint-plugin-prettier lint-staged3.2、在根目录新增.eslintrc.js文件，具体配置需要根据项目自行配置，常用配置查看可以访问 https://blog.csdn.net/Sharon598/article/details/123333163 第4条，在这里，我就简单配置如下：
module.exports = {
root: true,
env: {
node: true
},
extends: [
'plugin:vue/essential',
'eslint:recommended',
'plugin:prettier/recommended'
],
parserOptions: {
ecmaVersion: 2020
},
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'prettier/prettier': 'off'
}
}
3.3、根目录新增lint-staged.config.js文件，配置如下：
module.exports = {
'*.{js,vue}': [
'vue-cli-service lint ./src --fix',
'git add'
]
}
3.4、package.json文件配置修改，配置如下：
"husky": {
"hooks": {
"pre-commit": "lint-staged",
"commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
}
}重启项目，在页面中随意定义一个变量，例如：
handleCancel() {
let aaa = [];
this.visible = false;
}提交代码，报错如下:
3.5、配置.eslintignore文件，这个文件是配置哪些文件不需要eslint检测的，所以可以根据自己项目自行配置此文件，配置如下：
dist/*
node_modules/*
packages/*
public/*3.6、package.json文件配置lint脚本检测代码
"scripts": {
"lint": "eslint src/**/* --ext .js,.vue"
}重启项目，执行npm run lint，项目就会检测哪些代码不符合要求
4、添加prettier优化代码
4.1、添加.prettierrc.js文件，配置如下：
module.exports = {
// 超过80就换行
printWidth: 80,
// tab缩进大小，默认为2
tabWidth: 2,
// 使用tab缩进，默认false
useTabs: false,
// 使用分号，默认true
semi: false,
// 使用单引号, 默认false，(在jsx中配置无效, 默认都是双引号)
singleQuote: true,
// 行尾逗号，默认none，可选（none|es5|all），es5 包括es5中的数组、对象，all 包括函数对象等所有可选
trailingComma: 'none',
// 对象中的空格 默认true，true: { foo: bar }，false: {foo: bar}
bracketSpacing: true,
// JSX标签闭合位置 默认false
jsxBracketSameLine: false,
// 箭头函数参数括号 默认avoid 可选（avoid|always），avoid 能省略括号的时候就省略 例如x => x ，always 总是有括号
arrowParens: 'avoid',
// 不使用prettier格式化的文件填写在项目的.prettierignore文件中
ignorePath: '.prettierignore',
// 在jsx中把'>' 是否单独放一行
jsxBracketSameLine: false
}
4.2、添加.prettierignore，可以根据项目需要，自行配置
dist/*
node_modules/*
packages/*
public/*4.3、lint-staged-config.js文件修改如下
module.exports = {
'*.{js,vue}': [
'vue-cli-service lint ./src --fix',
'prettier --write ./src',
'git add'
]
}4.4、package.json添加prettier脚本
"scripts": {
"lint:fix": "prettier src/**/* --write",
}重启项目，执行npm run lint:fix，会发现项目中有不符合规范的代码，自动被修复了，pretter只会自动修复不影响逻辑的代码，影响逻辑的代码，需要手动修复
4.5、执行npm run lint:fix后，可能会在终端出现这种提示
此时只需要，执行 git config core.autocrlf false 即可
5、添加stylelint提交检测配置
5.1、安装stylelint、stylelint-config-recommended-vue、stylelint-config-standard、stylelint-config-prettier、stylelint-order、stylelint-less、postcss-html、postcss-less@4.0.0（必须是这个版本，否则会报错）
5.2、添加.stylelintignore文件，配置如下
dist/*
node_modules/*
packages/*
public/*5.3、添加.stylelintrc.js文件，配置如下
module.exports = {
// extends: ['stylelint-config-standard', 'stylelint-config-prettier', 'stylelint-config-html', "stylelint-config-standard-scss", 'stylelint-config-recommended-vue'],
extends: [
'stylelint-config-recommended',
'stylelint-config-standard',
'stylelint-config-recommended-vue',
'stylelint-config-html',
'stylelint-config-prettier'
],
plugins: ['stylelint-order', 'stylelint-less'],
ignorePath: '.stylelintignore',
overrides: [
{
files: ['**/*.{html,vue}'],
customSyntax: 'postcss-html'
},
{
files: ['**/*.less'],
customSyntax: 'postcss-less'
}
],
rules: {
indentation: 2,
'selector-pseudo-element-no-unknown': [
true,
{
ignorePseudoElements: ['v-deep']
}
],
'number-leading-zero': 'never',
'no-descending-specificity': null,
'font-family-no-missing-generic-family-keyword': null,
'selector-type-no-unknown': null,
'at-rule-no-unknown': null,
'no-duplicate-selectors': null,
'no-empty-source': null,
// 禁止空块
'block-no-empty': true,
'selector-pseudo-class-no-unknown': [
true,
{ ignorePseudoClasses: ['global'] }
],
'max-nesting-depth': null,
'max-line-length': null,
'selector-max-compound-selectors': null,
'selector-no-qualifying-type': null,
'selector-class-pattern': null,
'function-parentheses-newline-inside': null,
'alpha-value-notation': 'number',
// 禁止空第一行
'no-empty-first-line': true,
'order/properties-order': [
'position',
'top',
'right',
'bottom',
'left',
'z-index',
'display',
'flex-wrap',
'justify-content',
'align-items',
'float',
'clear',
'overflow',
'overflow-x',
'overflow-y',
'padding',
'padding-top',
'padding-right',
'padding-bottom',
'padding-left',
'margin',
'margin-top',
'margin-right',
'margin-bottom',
'margin-left',
'width',
'min-width',
'max-width',
'height',
'min-height',
'max-height',
'font-size',
'font-family',
'font-weight',
'text-justify',
'text-align',
'text-indent',
'text-overflow',
'text-decoration',
'white-space',
'color',
'background',
'background-position',
'background-repeat',
'background-size',
'background-color',
'background-clip',
'border',
'border-style',
'border-width',
'border-color',
'border-top-style',
'border-top-width',
'border-top-color',
'border-right-style',
'border-right-width',
'border-right-color',
'border-bottom-style',
'border-bottom-width',
'border-bottom-color',
'border-left-style',
'border-left-width',
'border-left-color',
'border-radius',
'opacity',
'filter',
'list-style',
'outline',
'visibility',
'box-shadow',
'text-shadow',
'resize',
'transition'
]
}
}
5.4、package.json添加stylelint脚本
"scripts": {
"stylelint:fix": "stylelint src/**/*.{html,vue,less} --fix"
}重启项目，执行npm run stylelint:fix，不符合规定的样式，会被自动修复，但个别需要自行修复
前往低代码交流专区
更多推荐
29
0- 0
已为社区贡献2条内容
所有评论(0)