3
ESlint + VSCode自动格式化代码
source link: https://www.fdevops.com/2020/09/07/vscode-4887
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
本文用 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 无效。
本文为原创文章，未经授权禁止转载本站文章。
原文出处：兰玉磊的个人博客
原文链接：https://www.fdevops.com/2020/09/07/vscode-4887
版权：本文采用「署名-非商业性使用-相同方式共享 4.0 国际」知识共享许可协议进行许可。
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK