# vscode配置vue+vetur+eslint+prettier自动格式化功能

> 2020年08月20日

该配置用于vue开发，最终效果是保存时自动根据eslint对js、html和css代码进行格式化

## vscode 安装插件

Vetur

![image-20200820155612127](./assets/image-20200820155612127.png)

Eslint

![image-20200820155654746](./assets/image-20200820155654746.png)

Prettier

![image-20200820155813851](./assets/image-20200820155813851.png)

## 配置

### vue-cli插件生成的代码

生成时选择Eslint+Prettier

![image-20200820160035882](./assets/image-20200820160035882.png)

自定义规则设置,创建`.prettierrc`文件对prettier格式化进行自定义

```js
{
 /* 单引号包含字符串 */
 "singleQuote": true,
 /* 不添加末尾分号 */
 "semi": false,
 /* 在对象属性添加空格 */
 "bracketSpacing": true,
 /* 优化html闭合标签不换行的问题 */
 "htmlWhitespaceSensitivity": "ignore"
}
```

配置settings.json文件

```json
"editor.codeActionsOnSave": {
 "source.fixAll": true
},
/* 关闭编辑器自带保存格式化功能，此功能会用Vetur进行格式化。*/
"editor.formatOnSave": false
```









### 非vue-cli生成的代码

单独引入以下红框中的几个依赖

![image-20200820160237409](./assets/image-20200820160237409.png)

















