vscode编辑器vue项目格式化代码

使用Vue开发项目的时候，开启ESlint校验后有各种头疼的报错，即便与同事约定好了一些代码编写规范，偶尔也会有一些遗漏的时候，不过可以通过一些扩展插件来自动格式化代码，来避免一些低级bug的产生。

总体分三步：

• 第一步：

  依次下载以下三个扩展插件，当然如果开发vue项目其他两个也是很有必要的。

  

• 第二步：

  打开编辑器中用户设置的settings.json文件，在后面添加如下关于格式化格则的代码

  // #让函数(名)和后面的括号之间加个空格
    "javascript.format.insertSpaceBeforeFunctionParenthesis": false,
    "explorer.confirmDragAndDrop": false,
    "javascript.preferences.quoteStyle": "single",
    "typescript.preferences.quoteStyle": "single",
    // tab 大小为2个空格
    "editor.tabSize": 2,
    // 100 列后换行
    "editor.wordWrapColumn": 100,
    // 保存时格式化
    "editor.formatOnSave": true,
    // 开启 vscode 文件路径导航
    "breadcrumbs.enabled": true,
    // prettier 设置语句末尾不加分号
    "prettier.semi": false,
    // prettier 设置强制单引号
    "prettier.singleQuote": true,
    // 注释后面加空格
    "prettier.eslintIntegration": true,
    // 选择 vue 文件中 template 的格式化工具
    "vetur.format.defaultFormatter.html": "prettyhtml",
    // 显示 markdown 中英文切换时产生的特殊字符
    "editor.renderControlCharacters": true,
    // 设置 eslint 保存时自动修复
    "eslint.autoFixOnSave": true,
    // eslint 检测文件类型
    "eslint.validate": [
      "javascript",
      "javascriptreact",
      {
        "language": "html",
        "autoFix": true
      },
      {
        "language": "vue",
        "autoFix": true
      }
    ],
    // vetur 的自定义设置
    "vetur.format.defaultFormatterOptions": {
      "prettier": {
        "singleQuote": true,
        "semi": false
      }
    }
             

• 第三步：

  如果不出意外，以上两步是可以完成保存时自动格式化代码的功能，不过有些同学可能不太习惯函数圆括号之前没有空格，那就把第二步中的

  "javascript.format.insertSpaceBeforeFunctionParenthesis": false,

  删除掉就好了。喜欢的同学只需要关闭Eslint关于函数括号的错误提示就好了。比如在.eslintrc.js中添加如下代码：

  // allow async-await
  'generator-star-spacing': 'off',
  // 函数圆括号之前没有一个空格
  "space-before-function-paren": ["error", "never"]
             

  

  over