安装插件ESLint
安装后老代码会有很多报红的地方
很多都是因为使用双引号引起的
配置vscode
打开settings.json
配置
{
"window.zoomLevel": 1,
"editor.fontSize": 13,
"editor.quickSuggestions": { //开启自动显示建议
"other": true,
"comments": true,
"strings": true
},
"editor.formatOnSave": true, //每次保存自动格式化
"prettier.singleQuote": true, //使用单引号替代双引号
"vetur.format.defaultFormatter.js": "vscode-typescript", //让vue中的js按编辑器自带的ts格式进行格式化
"[vue]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"eslint.run": "onSave",
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"prettier.printWidth": 200,//指定代码长度,超出换行
"prettier.requireConfig": true,//需要prettier.requireConfig格式化
"prettier.useEditorConfig": false,
"terminal.integrated.rendererType": "dom",
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
// 自动补全自定义模版
"emmet.triggerExpansionOnTab": true,
"emmet.showAbbreviationSuggestions": true,
"emmet.showExpandedAbbreviation": "always",
"open-in-browser.default": "Chrome",
"files.associations": {
"*.cjson": "jsonc",
"*.wxss": "css",
"*.wxs": "javascript",
"*.vue": "vue"
},
"emmet.includeLanguages": {
"wxml": "html",
"javascript": "html"
},
"minapp-vscode.disableAutoConfig": true,
"workbench.preferredDarkColorTheme": "Monokai Dimmed",
"workbench.preferredLightColorTheme": "Monokai Dimmed",
"workbench.preferredHighContrastColorTheme": "Abyss",
"workbench.colorTheme": "Monokai Dimmed",
"editor.tabSize": 2,
"javascript.updateImportsOnFileMove.enabled": "always",
"less.compile": {
"outExt": ".wxss"
},
"json.schemas": [
],
"workbench.welcomePage.hiddenCategories": [
"Setup",
"Beginner"
],
"javascript.validate.enable": false,
"typescript.validate.enable": false,
"vetur.validation.template": false,
"liveServer.settings.AdvanceCustomBrowserCmdLine": ""
}
这样com + s保存的时候会自动按照eslint的规范格式化代码
参考