0、需要安装如下扩展

首选项配置里面有使用到，需要以上四个格式化工具配合使用。
需要注意的是，eslint启用后如果出现import有下划线等错误，需要注意右下角有没有禁用：

点击开启即可。
Eslint下划线报错信息：
ESLint is disabled since its execution has not been approved or denied yet. Use the light bulb menu to open the approval dialog
参考文章：
https://blog.csdn.net/qq_42381128/article/details/109438147

1、设置首选项

文件-首选项-设置配置如下：（即setting.json文件）

{// 每次保存自动格式化"editor.formatOnSave": true,// 每次保存的时候将代码按eslint格式进行修复"editor.codeActionsOnSave": {"source.fixAll.eslint": true},// vue文件默认格式化方式vetur"[vue]": {"editor.defaultFormatter": "octref.vetur"},// vetur格式化配置"vetur.format.defaultFormatter.html": "js-beautify-html","vetur.format.options.tabSize": 2,"vetur.format.defaultFormatterOptions": {"js-beautify-html": {"wrap_attributes": "auto"}},"vetur.format.defaultFormatter.js": "vscode-typescript", //让vue中的js按编辑器自带的ts格式进行格式化"javascript.format.insertSpaceBeforeFunctionParenthesis": true, // 函数前加上空格 只有在默认vetur的时候生效// js文件默认格式化方式 和vue中的js保持一致使用编辑器自带的ts格式"[javascript]": {"editor.defaultFormatter": "vscode.typescript-language-features"},// json文件默认格式化方式prettier"[json]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},// css文件默认格式化方式prettier"[css]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},/* // vue文件默认格式化方式prettier"[vue]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},// typescript文件默认格式化方式prettier"[typescript]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},// javascript文件默认格式化方式prettier"[javascript]": {"editor.defaultFormatter": "esbenp.prettier-vscode"}, */// -----------------------其他自行配置-----------------------//关闭快速预览"editor.minimap.enabled": false,//使用主题"workbench.colorTheme": "greenery",// 字体大小"editor.fontSize": 22,// 控制折行方式 - "on" (根据视区宽度折行)"editor.wordWrap": "on","editor.tabSize": 2, // 换行默认以tab缩进 2个字符"editor.colorDecorators": false, // 控制编辑器是否显示内联颜色修饰器和颜色选取器。"editor.snippetSuggestions": "top", // 将建议的代码段优先级提前选择，比如输入for第一个提示是for循环代码段。"files.associations": {// 文件关联语言的优先级配置"*.vue": "vue","*.cshtml": "html","*.js": "javascript","*.dwt": "html"}// 根本不生效 还是要配置到prettier.config.js//"prettier.singleQuote": true,//"prettier.semi": false
}

2、Eslint配置

.eslintrc.js文件配置：（通过配置禁用一些eslint无关紧要的报错）

module.exports = {root: true,env: {node: true},extends: ['plugin:vue/essential', '@vue/standard'],parserOptions: {parser: 'babel-eslint'},rules: {// 'space-before-function-paren': 0,'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off','no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'}
}

3、prettier配置（不需要了）

prettier.config.js文件配置：（prettier的格式化微调，句尾的分号不要，使用单引号等。）

module.exports = {semi: false,singleQuote: true
}

但是使用了编辑器自带的ts格式进行格式化js后，此两项是不用配置了。

4、格式化效果

4.1、vue文件使用vetur的js-beautify-html格式化

1、缩进2个字符
2、内容过长会折行，而不是每个属性都换行
3、函数名称后面有空格
4、使用单引号非双引号
5、无分号、逗号结尾
6、注释前后空格

4.2、js文件按编辑器自带的ts格式进行格式化

1、缩进2个字符
2、函数名称后面有空格
3、文件末尾空一行
4、使用单引号非双引号
5、无分号、逗号结尾
6、注释前后空格

4.3、css文件默认格式化方式prettier

1、缩进2个字符
2、自动追加分号结尾
3、冒号后追加空格

4.4、json文件默认格式化方式prettier

1、缩进2个字符
2、使用双引号

5、配置历程：

首先在创建项目时，选择eslint+standard即可。

对应的文件，鼠标右键-文档格式设置方式-配置默认格式化程序，进行prettier和vetur等等的切换查看到想要的效果，可以看到setting.json文件同步进行了配置修改。

然后我们配置的目的就是设置自动格式化、默认采用的格式化程序而已。

通常不会这么一步到位的完美，所以对于加了逗号，单引号双引号，标签换行，函数后空格等小问题就进行具体的设置修补。

6、支持jsx：

vue中使用jsx语法渲染各个div节点，按照以上配置，自动格式化乱码。
后来发现，只是click事件绑定写法导致错乱。
jsx官方写法：

<input vOn:click={this.newTodoText} />

按以上首选项配置，以上写法绑定click事件，自动格式化时会乱码，会去掉click，还会导致层级错乱。
换了很多配置还是不行，于是从代码入手，换写法，只需要换回vue的写法即可。

{...{ on: this.newTodoText }}

参考官网：https://cn.vuejs.org/v2/guide/render-function.html

完。

首选项配置+Eslint+prettier+Vetur相关推荐

vscode配置ESLint+Prettier - Code formatter+Vetur
首先是安装ESLint+prettier+vetur: vscode 搜索安装即可,然后是注意package是否有这些: 没有的话npm安装. 之后就是配置这个文件: module.exports = ...
VSCode配置格式化工具(Prettier/Vetur/ESLint)和jsconfig.json
VSCode配置格式化工具(Prettier/Vetur/ESLint) 网上很多配置,有的过时了, 有的很杂, 自己看了下文档,简单配置了以下, 顺便记录下来. 准备用vue-cli建好项目之后, ...
VSCode Eslint+Prettier+Vetur常用配置
工程里创建文件.eslintrc.js module.exports = {root: true,parserOptions: {parser: 'babel-eslint',sourceType: ...
Vue3+Vite项目配置Eslint+Prettier+Husky+Lint-Staged+Commitlint
Eslint 配置 ESLint 是一个插件化并且可配置的 JavaScript 语法规则和代码风格的检查工具. ESLint 能够帮你轻松写出高质量的 JavaScript 代码. 1.建议 vsc ...
vsCode配置Eslint+Prettier结合使用详细配置步骤，规范化开发
一.eslint eslint它规范的是代码偏向语法层面上的风格.本篇文章以一个基本的vue项目,来说明eslint+prettier+husky配置项目代码规范,为了更好的描述本文, ...
ESLint+Prettier+Vetur 统一Vue项目代码风格
前言一.为什么要整合Eslint和Prettier? 1.对比Prettier和Linters(eslint/tslint/stylelint) Linters有两类规则: 格式化规则:如最大长度, ...
配置eslint+prettier报错Error: Cannot read config file: /Users/qiandingwei/Documents/projects/creams-main
安装eslint和prettier后出现如下报错 Error: Cannot read config file: /Users/qiandingwei/Documents/projects/cream ...
umijs配置eslint,prettier,stylelint,commitlint
umijs的资料好像不是很多,真的配置了超级久呜呜呜呜,踩了居多坑我记得我的是一创建项目,默认就有yorkie,所以我就不想用husky,我看网上都是husky教程的,关于umijs+yorkie的 ...
Mac OS平台的Pr cc怎样配置首选项设置(二)？
PrCC 2018 Mac版是一款常用的视频编辑软件,编辑画面质量比较好,有较好的兼容性,,小编今天就此款软件的"首选项配置"问题,为大家详细讲解一下.此篇文章为Pr mac首选 ...

首选项配置+Eslint+prettier+Vetur