格式化代码时用到的插件
ESLint（代码规范和错误检查工具，控制代码质量）
Prettier（代码格式化工具）
Vetur（识别 vue 文件）
一、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不自动换行 ----------------
WX20230403-164432@2x.png
三、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"
}
参考：
vscode 前端最佳插件配置
