1. 开发环境 vue+eslint+prettier
2. 电脑系统 windows10 专业版
3. 在应用 vue+eslint 我的项目开发的过程中, 公司忽然加需要应用 prettier 做代码的格局, 怎么搞呢? 上面我来分享一下。
4. 废话不多说, 间接上操作:
npm i eslint-plugin-prettier@3.3.1 -D
npm i @vue/eslint-config-prettier@6.0.0 -D
npm i prettier@2.2.1 -D
5. 在.eslintrc.js 中批改代码如下:
// 原来配置
extends: [
'plugin:vue/essential',
'@vue/standard'
],
// 批改之后
extends: ["plugin:vue/essential", "@vue/standard", "@vue/prettier"],
6. 在 vue.config.js 中增加如下代码:
module.exports = {chainWebpack: (config) => {
// 开启 eslint 主动修复,要害代码
config.module
.rule('eslint')
.use('eslint-loader')
.loader('eslint-loader')
.tap((options) => {
options.fix = true
return options
})
}
}
// 在保留的时候, 会主动格局代码构造
7. 本期的分享到了这里就完结啦, 心愿对你有所帮忙, 让咱们一起致力走向巅峰。