VSCode - setting.json配置 - Prettier、Vetur格式化和ESLint检查

vscode 前端最佳插件配置

格式化代码时用到的插件

ESLint（代码规范和错误检查工具，控制代码质量）
Prettier（代码格式化工具）
Vetur（识别 vue 文件）
EditorConfig for VS Code（定义项目的编码规范，编辑器的行为会与.editorconfig 文件中定义的一致，并且其优先级比编辑器自身的设置要高，这在多人合作开发项目时十分有用而且必要）
Syncing（同步你的 VS Code 配置，在另一台机器使用可以自动同步配置，不需要重新慢慢配了）
Manta’s Stylus Supremacy（使得 stylus 格式化更好看）

一、ESLint检查与保存修复

如果项目使用ESLint，按以下设置保存自动修复飘红代码
对 vscode >1.41.0生效
ESLint官网
如果ESLint配置的完整，prettier加不加都可以，保存自动修复不合规代码

  // --------------------  配置eslint  --------------------
  //autoFixedOnSave 设置已废弃，采用如下新的设置，新版(>1.41.0)配置
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.format.enable": true,
  //autoFix默认开启，只需输入字符串数组即可
  "eslint.validate": [
    "javascript",
    "vue",
    "html",
    "javascriptreact",
    "vue-html"
  ],
  // --------------------  配置eslint  --------------------

二、格式化vue文件不自动换行

1、vscode下载ESlint, Prettier, Vetur插件
2、打开vscode 选择 文件->首选项->设置
3、搜索vetur.format.defaultFormatterOptions，之后在setting.json中编辑
4、ctrl + s 保存 ，设置默认Vetur
不足：vue中的js无法配置单双引号，句尾分号
settings.json：

  // ----------------  设置属性、js不自动换行  ----------------
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": "aligned-multiple" //当超出折行长度时，将属性进行垂直对齐
    },
    "prettyhtml": {
      "printWidth": 100,//每行100字符
      "singleQuote": false,//单引号强制转双引号
      "wrapAttributes": false,
      "sortAttributes": false
    }
  },
  // 这个按用户自身习惯选择
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  // 让vue中的js按编辑器自带的ts格式进行格式化
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  // ----------------  设置属性、js不自动换行  ----------------

三、Vetur格式化

Vetur配置主要针对vue文件，包含vue文件折行设置，句尾分号，key是否使用单引号，方法末尾是否加逗号进行的配置
vue文件设置默认格式化为Vetur
不足：vue中的js换行有点异常

 // --------------------  vetur 配置  --------------------
  // vue文件默认格式化工具：vetur
  "[vue]": {
    "editor.defaultFormatter": "octref.vetur"
  },
  // 这个按用户自身习惯选择
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  // 让vue中的js按编辑器自带的ts格式进行格式化
  //  "vetur.format.defaultFormatter.js": "vscode-typescript",
  // 让vue中的js按prettier进行格式化 用这个
  "vetur.format.defaultFormatter.js": "prettier",
  "vetur.format.defaultFormatterOptions": {
    "js": "prettier",
    "js-beautify-html": {
      "wrap_attributes": "aligned-multiple" //当超出折行长度时，将属性进行垂直对齐
    },
    "prettyhtml": {
      "tabWidth": 4, // 会忽略vetur的tabSize配置
      "printWidth": 100, //每行100字符
      "singleQuote": true, //是否使用单引号
      "semi": false, // 句尾是否加;
      "wrapAttributes": false,
      "sortAttributes": false
    },
    //vue中的js生效
    "prettier": {
      "semi": false, // 句尾是否加;
      "singleQuote": true, //是否使用单引号
      "trailingComma": "none" //禁止随时添加逗号
    }
  },
  // --------------------  vetur 配置  --------------------

三、Prettier格式化

因为vue使用Vetur配置，这里的prettier 单独配置主要针对js文件句尾分号，key是否使用单引号，方法末尾是否加逗号进行的配置
发现设置不生效主要因为Prettier默认按.editorConfig配置为最高优先级
js文件设置默认格式化为Prettier

优先级
1、项目目录的.prettierrc文件，支持json和分号格式（其实还有很多种）
2、项目目录的.editorconfig文件（默认配置)
3、vscode的配置文件（也有好几个地方配置，包括vetur节点下面）

测试过程中发现一个插件可以不按以下配置直接对js文件格式化Prettier-Standard - JavaScript formatter

  // --------------------  prettier 配置(以下配置主要针对.js)  --------------------
  "prettier.useEditorConfig": false, // 不使用editorConfig配置文件设置才生效
  "prettier.semi": false, // 句尾是否加;
  "prettier.singleQuote": true, //是否使用单引号
  "prettier.trailingComma": "none", //禁止随时添加逗号
  // --------------------  prettier 配置  --------------------

完整的setting.json

{
  "workbench.iconTheme": "vscode-icons",
  // --------------------  配置eslint  --------------------
  //autoFixedOnSave 设置已废弃，采用如下新的设置，新版(>1.41.0)配置
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.format.enable": true,
  //autoFix默认开启，只需输入字符串数组即可
  "eslint.validate": [
    "javascript",
    "vue",
    "html",
    "javascriptreact",
    "vue-html"
  ],
  // --------------------  配置eslint  --------------------
  // 设置编辑器的默认格式化工具
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[less]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  //方法括号之间插入空格
  "javascript.format.insertSpaceBeforeFunctionParenthesis": false,
  // --------------------  vetur 配置  --------------------
  // vue文件默认格式化工具：vetur
  "[vue]": {
    "editor.defaultFormatter": "octref.vetur"
  },
  // 这个按用户自身习惯选择
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  // 让vue中的js按编辑器自带的ts格式进行格式化
  //  "vetur.format.defaultFormatter.js": "vscode-typescript",
  // 让vue中的js按prettier进行格式化 用这个
  "vetur.format.defaultFormatter.js": "prettier",
  "vetur.format.defaultFormatterOptions": {
    "js": "prettier",
    "js-beautify-html": {
      "wrap_attributes": "aligned-multiple" //当超出折行长度时，将属性进行垂直对齐
    },
    "prettyhtml": {
      "tabWidth": 4, // 会忽略vetur的tabSize配置
      "printWidth": 100, //每行100字符
      "singleQuote": true, //是否使用单引号
      "semi": false, // 句尾是否加;
      "wrapAttributes": false,
      "sortAttributes": false
    },
    //vue中的js生效
    "prettier": {
      "semi": false, // 句尾是否加;
      "singleQuote": true, //是否使用单引号
      "trailingComma": "none" //禁止随时添加逗号
    }
  },
  // --------------------  vetur 配置  --------------------
  // --------------------  koro1FileHeader 配置  --------------------
  // 头部注释
  "fileheader.customMade": {
    "Author": "AuthorName",
    "Date": "Do not edit", // 文件创建时间(不变)
    "LastEditors": "AuthorName", // 文件最后编辑者
    "LastEditTime": "Do not edit", // 文件最后编辑时间
    "Description": ""
    // "FilePath": "only file name", // 只有文件名
    // "custom_string_obkoro1_copyright": "Copyright (C) ${now_year} AuthorName. All rights reserved.",
    // "custom_string_obkoro1_date": "Do not edit" // 不带Date前缀的时间
  },
  // 函数注释
  "fileheader.cursorMode": {
    "description": "",
    //"custom_string_obkoro1": "",
    "param": "params",
    "return": ""
  },
  // 插件配置项
  "fileheader.configObj": {
    "createHeader": false, // 新建文件自动添加头部注释，默认打开
    "autoAdd": false, // 保存自动添加头部注释，开启才能自动添加，默认开启
    "openFunctionParamsCheck": true, //函数注释自动提取函数的参数，默认开启
    "createFileTime": true, // 默认为此文件的创建时间，设为false更改为当前生成注释的时间
    "dateFormat": "YYYY-MM-DD HH:mm:ss", // 默认时间格式，修改影响所有时间字段
    // 自定义注释中的艾特和冒号：
    "atSymbol": ["@", "@"], // 所有文件的头部注释和函数注释的默认值 @
    "colon": [": ", ": "] // 所有文件的头部注释和函数注释的默认值 :
    // 自定义特殊字段名，Date、LastEditTime、LastEditors、Description、FilePath
    // "specialOptions": {
    //   "Date": "since",
    //   "LastEditTime": "lastTime",
    //   "LastEditors": "LastAuthor",
    //   "Description": "message",
    //   "FilePath": "文件相对于项目的路径"
    // }
    // 函数参数配置
    // "functionParamsShape": "normal", // 正常
    // "functionParamsShape": "no bracket", // 没有方括号
    // "functionParamsShape": "no type", // 没有类型
    // "functionParamsShape": [ "{", "}"], // 函数参数外形自定义，默认值 {}
    // "functionTypeSymbol": "*", // 参数没有类型时的默认值 *
    // 函数设置不添加参数和类型 {*}
    // "functionParamsShape": "no type", // 没有类型
    // "functionTypeSymbol": "" // 参数没有类型时的默认值 *
  },
  // --------------------  koro1FileHeader 配置  --------------------
  // --------------------  prettier 配置(以下配置主要针对.js)  --------------------
  "prettier.useEditorConfig": false, // 不使用editorConfig配置文件设置才生效
  "prettier.semi": false, // 句尾是否加;
  "prettier.singleQuote": true, //是否使用单引号
  "prettier.trailingComma": "none", //禁止随时添加逗号
  // --------------------  prettier 配置  --------------------
  "git.confirmSync": false,
  "security.workspace.trust.untrustedFiles": "open"
}