vscode eslint不生效_vscode格式化配置

一、安装常用插件:

Ctrl+shift+x打开应用商店搜索这几个插件安装即可

Beautify、Eslint、Vetur

二、setting.josn配置

文件-首选项-设置-在setting.josn中编辑,打开这个setting.josn文件后将下面配置复制即可

36c3bb6f67a296361f9272dd10332923.png

{// tab 大小为2个空格
"editor.tabSize": 2,// 100 列后换行
"editor.wordWrapColumn": 100,// 保存时格式化
"editor.formatOnSave": true,// 开启 vscode 文件路径导航
"breadcrumbs.enabled": true,// prettier 设置语句末尾不加分号
"prettier.semi": false,// prettier 设置强制单引号
"prettier.singleQuote": true,// 选择 vue 文件中 template 的格式化工具
"vetur.format.defaultFormatter.html": "prettyhtml",// 显示 markdown 中英文切换时产生的特殊字符
"editor.renderControlCharacters": true,// 设置 eslint 保存时自动修复
"eslint.autoFixOnSave": true,// eslint 检测文件类型
"eslint.validate": ["javascript","javascriptreact",
{"language": "html","autoFix": true
},
{"language": "vue","autoFix": true
}
],// vetur 的自定义设置
"vetur.format.defaultFormatterOptions": {"prettier": {"singleQuote": true,"semi": false
}
},// 修改500ms后自动保存
"editor.formatOnSaveTimeout": 500,"files.autoSave": "afterDelay","files.autoSaveDelay": 500,"editor.codeActionsOnSaveTimeout": 500,"[javascript]": {"editor.defaultFormatter": "vscode.typescript-language-features"
}
}

36c3bb6f67a296361f9272dd10332923.png

三、配置.editorconfig文件

项目根目录下找到.editorconfig这个文件,然后复制下面配置即可

36c3bb6f67a296361f9272dd10332923.png

# https://editorconfig.org
root = true # 根目录的配置文件,编辑器会由当前目录向上查找,如果找到 `roor = true` 的文件,则不再查找
[*] # 匹配所有的文件
indent_style = space # 空格缩进
indent_size = 4 # 缩进空格为4个
end_of_line = lf # 文件换行符是 linux 的 `\n`
charset = utf-8 # 文件编码是 utf-8
trim_trailing_whitespace = true # 不保留行末的空格
insert_final_newline = true # 文件末尾添加一个空行
curly_bracket_next_line = false # 大括号不另起一行
spaces_around_operators = true # 运算符两遍都有空格
indent_brace_style = 1tbs # 条件语句格式是 1tbs
[*.js] # 对所有的 js 文件生效
quote_type = single # 字符串使用单引号
[*.{html,less,css,json}] # 对所有 html, less, css, json 文件生效
quote_type = double # 字符串使用双引号
[package.json] # 对 package.json 生效
indent_size = 2 # 使用2个空格缩进

36c3bb6f67a296361f9272dd10332923.png

注释都写了, 我就不再啰嗦,实属干货,上手试试吧!

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
您好!对于VS Code配置ESLint不生效的问题,我可以提供一些建议。请按照以下步骤进行排查: 1. 确保已在项目中安装了ESLint,并且在项目的根目录下存在配置文件(一般为`.eslintrc`或`.eslintrc.js`)。 2. 确认您的VS Code已安装了ESLint插件。在扩展面板中搜索并安装ESLint插件。 3. 在VS Code的设置中,找到ESLint配置项。您可以通过按下`Ctrl + ,`(Windows/Linux)或`Cmd + ,`(Mac)打开设置面板,然后搜索"eslint"来找到相关配置。 4. 在ESLint配置项中,确保已选中"自动修复"(autoFix)选项。这将使VS Code自动应用ESLint规则并修复一些常见问题。 5. 如果您的项目使用了特定的ESLint规则集(如Airbnb或Standard等),请确保已在VS Code的设置中指定正确的规则集。在`.eslintrc`文件中,您可以配置"extends"属性来指定所使用的规则集。 6. 如果您的项目有多个工作区文件夹,请确保在VS Code的设置中已正确配置ESLint的工作区设置。您可以在工作区文件夹的`.vscode/settings.json`文件中配置ESLint相关设置。 7. 尝试重启VS Code,然后打开您的项目,看看ESLint是否开始生效。 如果上述步骤都没有解决问题,您可以进一步检查以下可能的原因: - 您的项目中可能存在ESLint配置错误。请确保`.eslintrc`文件中的规则和插件设置正确,并符合您项目的需求。 - 如果您的项目使用了多个ESLint配置文件,请确保这些配置文件之间没有冲突,并且在VS Code的设置中正确指定了配置文件路径。 - 某些其他VS Code插件可能会干扰ESLint的工作。您可以尝试禁用其他插件,然后逐个启用以确定是否与其他插件冲突。 希望这些提示能够帮助您解决问题!如有更多疑问,请随时提问。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值