vue+eslint项目(项目已开发)使用prettier
Posted 灰太狼的情与殇
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue+eslint项目(项目已开发)使用prettier相关的知识,希望对你有一定的参考价值。
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.本期的分享到了这里就结束啦,希望对你有所帮助,让我们一起努力走向巅峰。
以上是关于vue+eslint项目(项目已开发)使用prettier的主要内容,如果未能解决你的问题,请参考以下文章
[万字逐步详解]使用 webpack-dev-server + ESLint 配置 vue 项目的开发环境