基于vue/cli3.0+脚手架搭建Vue项目(10)
文章目录
前言
为了更好的统一项目的代码风格,因此在编写时就可以使用eslint
+prettier
,它们不仅能方便代码编写,还能避免不必要的错误,让代码变得更加严谨。
因为每个人可能设置的规则不一,因此我们就使用它们统一推荐的默认规则。
一、eslint,prettier依赖的安装
需要注意的是,各依赖包之间的版本有一定的关联,版本有误,启动或者修复时会报错提示,因此可以选择如下各版本:
npm i eslint@7.32.0 eslint-config-prettier@7.0.0 eslint-loader@4.0.2 eslint-plugin-prettier@3.4.1 eslint-plugin-vue@8.7.1 babel-eslint@10.1.0 prettier@2.6.2 -D
二、eslint,prettier规则配置
1. 项目根目录新建.eslintrc.js文件,.eslintignore文件,.prettierrc文件,.prettierignore文件
.eslintrc.js
代码:(tip:具体规则可参考http://eslint.cn/docs/rules/,这里我们使用推荐的统一规则)
需要特别注意一下:parserOptions
里设置了一个parser: "babel-eslint"
用来解析es6
语法
module.exports = {
root: true,
env: {
node: true,
es6: true,
browser: true
},
parser: "vue-eslint-parser",
parserOptions: {
sourceType: 'module',
parser: "babel-eslint"
},
extends: ['eslint:recommended', "plugin:prettier/recommended"],
rules: {
// 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
// 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
//强制使用单引号
// quotes: ['error', 'single'],
//强制不使用分号结尾
semi: ['error', 'always'],
// 缩进风格
indent: ["error", 2],
},
}
.eslintignore
代码:(tip:.eslintignore
是默认会忽略node_modules
文件夹的,这里不做忽略,文件暂时让它空着)
.prettierrc
代码:(tip:prettier
的全部规范只有十来个,详情可参考https://www.prettier.cn/docs/options.html)
{
"printWidth": 120,
"trailingComma": "all",
"tabWidth": 2,
"semi": true,
"singleQuote": true,
"bracketSpacing": true,
"arrowParens": "avoid",
"tslintIntegration": false
}
.prettierignore
代码:
node_modules
dist
src/assets
package-lock.json
2. 在vue.config.js文件配置rules
仅以校验src/views
目录下的文件为例:(tip:代码打包发版前记得注释一下)
module.exports = defineConfig({
//其他配置...
lintOnSave: true,
configureWebpack: (config) => {
config.module.rules.push(
{
test: /\.(js|vue)$/, // both .js and .vue
enforce: 'pre',
loader: 'eslint-loader',
include: [path.resolve(__dirname, 'src/views')],
options: {
fix: true
}
}
)
}
})
三、重启Vscode验证效果
ctrl+s前的效果:
ctrl+s后的效果:
总结
既然参与,就全情投入。