本文用 Vue 项目做示范。
利用 Vue CLI 创建项目时要将 ESlint 选上，下载完依赖后，用 VSCode 打开项目。
安装插件 ESLint，然后 File -> Preference -> Settings（如果装了中文插件包应该是 文件 -> 选项 -> 设置）。
Mac是 Code -> Preference -> Settings （Code -> 首选项 -> 设置）。
搜索 eslint，点击 Edit in setting.json。
以下是我（兰玉磊）的格式化配置信息，将以下选项添加到配置文件
{
"editor.fontSize": 13,
"eslint.enable": true, //是否开启vscode的eslint
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}, // #每次保存的时候自动格式化
"eslint.options": { //指定vscode的eslint所处理的文件的后缀
"extensions": [
".js",
".vue",
".ts",
".tsx"
]
},
//确定校验准则
"eslint.validate": [
"javascript",
"vue",
"html"
],
"files.autoSave": "onFocusChange",
"files.associations": {
"*.wpy": "vue",
"*.wxml": "wxml",
"*.cjson": "jsonc",
"*.wxss": "css",
"*.wxs": "javascript",
"*.html": "html"
},
"emmet.includeLanguages": {
"wxml": "html"
},
"minapp-vscode.disableAutoConfig": true,
// vscode默认启用了根据文件类型自动设置tabsize的选项
"editor.detectIndentation": false,
// 重新设定tabsize
"editor.tabSize": 2,
// #让prettier使用eslint的代码格式进行校验
"prettier.eslintIntegration": true,
// #去掉代码结尾的分号
"prettier.semi": false,
// #使用单引号替代双引号
"prettier.singleQuote": true,
// #让函数(名)和后面的括号之间加个空格
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
// #让vue中的js按编辑器自带的ts格式进行格式化
"vetur.format.defaultFormatter.js": "vscode-typescript",
"git.enableSmartCommit": true,
"editor.quickSuggestions": {
"strings": true
},
//一定要在vutur.defaultFormatterOptions参数中设置，单独修改prettier扩展的设置是无法解决这个问题的，因为perttier默认忽略了vue文件（事实上从忽略列表移除vue也不能解决这个问题）
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
// force-aligned | force-expand-multiline
"wrap_attributes": "force-aligned"
},
"prettyhtml": {
"printWidth": 100,
"singleQuote": false,
"wrapAttributes": false,
"sortAttributes": true
},
"prettier": {
// #去掉代码结尾的分号
"semi": false,
// #使用单引号替代双引号
"singleQuote": true
}
},
// 插件KoroFileHeader
// 文件头部注释-快捷键crtl+alt+i（window）,ctrl+cmd+t (mac)
"fileheader.customMade": {
"Descripttion": "",
//"version": "",
"Author": "voanit",
"Date": "Do not edit",
"LastEditors": "voanit",
"LastEditTime": "Do not Edit"
},
//函数注释-快捷键ctrl+alt+t (window), ctrl+alt+t(mac)
"fileheader.cursorMode": {
"name": "",
// "test": "test font",
// "msg": "",
"param": "",
"return": ""
},
//安装live Server插件
"liveServer.settings.donotVerifyTags": true,
"liveServer.settings.donotShowInfoMsg": true,
"liveServer.settings.NoBrowser": true,
"liveServer.settings.CustomBrowser": "chrome", //设置默认打开的浏览器
"liveServer.settings.host": "127.0.0.1",
"liveServer.settings.port": 5000, //设置本地服务的端口号
"liveServer.settings.root": "/dist",
"workbench.colorTheme": "Brackets Light Pro",
"workbench.iconTheme": "material-icon-theme",
"go.useLanguageServer": true,
"tabnine.experimentalAutoImports": true,
"explorer.confirmDelete": false,
"kite.showWelcomeNotificationOnStartup": false,
"vs-kubernetes": {
"vs-kubernetes.helm-path.mac": "/Users/lanyulei/.vs-kubernetes/tools/helm/darwin-amd64/helm"
},
"vsicons.dontShowNewVersionMessage": true,
"terminal.integrated.shell.osx": "/bin/bash",
"workbench.startupEditor": "newUntitledFile",
"eslint.codeAction.showDocumentation": {
"enable": true
}
}配置完之后，VSCode 会根据你当前 Vue 项目下的 .eslintrc.js 文件的规则来验证和格式化代码。
PS：自动格式化代码在保存时自动触发，目前试了 JS 以及 vue 文件中的 JS 代码都没问题，html 和 vue 中的 html 和 css 无效。