1.在插件库里面搜索下载ESLint
2.打开设置,配置settings.json文件
打开后,加上这一段配置代码。
//ESLint插件的配置
"editor.codeActionsOnSave": {
"source.fixAll": true
}
3. 下载prettier插件
在C:\Users\xxxx目录下创建文件 .prettierrc , 在其中添加如下内容后保存
{"semi": false, "singleQuote": true, "printWidth": 300}
然后配置vscode中的settings.json文件,添加如下内容
// prettier 配置路径 记得改成刚刚自己配置的路径!!!
"prettier.configPath": "C:\\Users\\xxxx\\.prettierrc",
"eslint.alwaysShowStatus": true,
"prettier.trailingComma": "none",
"prettier.semi": false,
// 每行文字个数超出此限制将会被迫换行
"prettier.printWidth": 300,
// 使用单引号替换双引号
"prettier.singleQuote": true,
"prettier.arrowParens": "avoid",
// 设置 .vue 文件中,HTML代码的格式化插件
"vetur.format.defaultFormatter.html": "js-beautify-html",
"vetur.ignoreProjectWarning": true,
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_attributes": false
},
"prettier": {
"printWidth": 300,
"trailingComma": "none",
"semi": false,
"singleQuote": true,
"arrowParens": "avoid"
}
},
4.配置格式化文档方式 (.vue和.js都要配置)
5. 配置完成
如果要禁用限制规则可以查看官方文档 —— ESLint - Pluggable JavaScript linter