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

参考文章：

blog.csdn.net/qq_42381128…

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 }}

参考官网：cn.vuejs.org/v2/guide/re…

完。