eslint或stylelint配置完之后vscode无法自动格式化问题的解决办法

最新推荐文章于 2024-01-19 14:02:39 发布
最新推荐文章于 2024-01-19 14:02:39 发布
阅读量4.4k 收藏
点赞数 1
分类专栏： bug解决方案 文章标签： vscode stylelint eslint
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40618238/article/details/122021435
版权
本文介绍了在使用vscode时，配置eslint和stylelint后如何实现保存时自动格式化代码。通过创建.extensions.json文件推荐安装插件，并设置vscode的相关规则，确保团队开发中代码风格的一致性。
摘要由CSDN通过智能技术生成

配置了eslint和stylint规则之后，想要vscode在保存的时候自动帮你格式化修改。你需要安装对应的插件和开启对应的设置选项。本文忽略如果配置eslint和stylint规则，直接讲后面的部分。

1. 在项目中设置推荐安装插件

在这里插入图片描述
在这里插入图片描述
每个人都可以手动安装这两个插件，但在团队开发中，你无法保证每个成员都会自己手动安装，所以你可以在项目下设置一个.vscode/extensions.json 文件，这样项目被vscode打开就会检测本地是否有这两个插件，没有就会弹出提示。

{
   
    "recommendations": [
        "dbaeumer.vscode-eslint",
        "stylelint.vscode-stylelint"
最低0.47元/天 解锁文章
杨灿就是杨火山
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue项目eslint格式化最全注释！拿走不谢
c1518589418的博客
12-11 5284
JavaScript语言因为其灵活，怎么写都不会错的特点深受开发人员喜爱，然而过于灵活也会导致一些难以排查的bug。好的代码风格能够帮我们解决这些问题（typeScript：没错，正是在下！）雾~~ 代码检查是一种静态的分析，常用于寻找有问题的模式或者代码，并且不依赖于具体的编码风格。eslint附有大量开箱即用的配置规则帮助我们检查代码，但每次需要翻阅长长的文档颇为麻烦，我根据网络把大部分能用...
vue项目vscode安装eslint插件和错误自动修复以及如何关闭eslint校验
cxy980626的博客
11-29 2303
当我们编写不符合eslint规范的代码时，启动项目会报错，而且代码里会报红，如下图： 方案一：自动错误修复 运行指令：npm run lint 会帮助我们自动修复不符合规范的代码 方案二：安装eslint插件 ① 安装eslint插件并启用 ② 文件 > 首选项 > 设置 > setting.json 添加如下配置： "editor.codeActionsOnSave": { "source.fixAll": true }, 配置完成后，在我们编写代码时，esli.
eslint无法自动格式化？格式化无效？eslint配置保存时自动format
Coder_46Ha的博客
09-28 5944
eslint无法自动格式化？格式化无效？eslint配置保存时自动format 对于vscode，点击左下角小齿轮，点击设置，在设置中搜索eslint ，打开setting.json，加上： "editor.formatOnPaste": true, "editor.formatOnType": true, "eslint.codeAction.showDocumentation": { "enable": true }, "editor.codeActionsOnSave": {
eslint 无法格式化ts_vscode-eslint的踩坑实践--typescript无法格式化
weixin_39896256的博客
12-20 437
vscode-eslint的踩坑实践--typescript无法格式化引言最近开发的前端项目随着开发的人员越来越多，代码规范已经是一个很难避免的问题了，虽然百度有fecs这个规则检查，但是不论是icode或者是项目本地都没有配置或检查，完全靠自觉，这是件非常扯淡的事。icode负责人表示暂时没法支持这个，所以看来只能在本地想想办法了。fecs中的jformater因为不支持自定义格式化调用规则，让...
使用最新 Vue 脚手架搭建的项目，VSCode 保存自动格式化功能失效问题处理
tanqin的博客
04-13 2192
当我们使用最新 Vue 脚手架搭建的项目，ESLint、保存自动格式化也都开启了，但是我们修改项目中。等文件时，并没有自动帮我们格式化，而需要运行。没有自动格式化是由于。命令才会格式化文件。
扩展名‘eslint‘被配置为格式化程序，但它无法格式化’javascript‘文件
寒夜冰霜的博客
02-17 1132
eslint插件版本过低，升级eslint版本到最新。
vscode 配置vue+vetur+eslint+prettier自动格式化功能
10-15
在本文中，我们将详细介绍如何配置 VSCode 以实现 Vue 项目的自动格式化功能，利用 Vetur、ESLint 和 Prettier 进行协同工作。 首先，Vetur 是一个专门为 Vue.js 设计的 VSCode 扩展。它提供了诸如语法高亮、智能...
Vue-cli Eslint在vscode里代码自动格式化的方法
08-27
总的来说，通过集成 Eslint 和 Vetur，并正确配置 VS Code 的设置，我们可以实现 Vue CLI 项目在 VS Code 中的代码自动格式化。这不仅有助于保持代码整洁，也有利于团队成员之间的代码一致性，从而提升开发质量和...
vscode配置setting.json文件实现eslint自动格式代码
10-14
本篇文章将详细介绍如何通过配置 `settings.json` 文件，在 VSCode 中实现 ESLint 自动格式化代码。 首先，我们需要了解 ESLint。ESLint 是一款静态代码分析工具，它能检查 JavaScript 代码并报告潜在的错误和风格...
vue+ESLint 配置保存 自动格式化代码
10-15
配置好ESLint之后，我们需要在VSCode编辑器中进行相应的设置，以便代码保存时能够自动触发ESLint的校验和格式化。在VSCode的设置中找到扩展部分的ESLint设置项，将warningdelete（prettier/prettier）“errorDelete...
Vscode安装Eslint扩展后无法实现保存自动修复
最新发布
IIIIIAN
01-19 1240
一个现有项目引入eslint时，vscode的eslint扩展会报很多错，通过打开eslint的autoFixOnSave配置自动修复。从2.0.4版本开始，eslint扩展就移除了autoFixOnSave配置项。因为保存自动修复成为了vscode的Code Action on Save的一部分，需要在editor.codeActionsOnSave配置项中进行配置，下面的配置对所有提供自动修复的提供方都有效。
在vscode配置eslint保持自动更改
weixin_48493160的博客
03-26 197
1.按住 ctrl + shift + p 在首选项打开设置JSON Open Setting(JSON）中配置如下 2. "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, "editor.tabCompletion": "on", "vetur.ignoreProjectWarning": true, "vetur.validation.template": false,
vscode配置eslint保存自动修复
阿甘兄
07-09 4385
① 打开eslint插件，点击设置： ②打开设置文件 ③复制以下的内容（把原来的直接覆盖），内容如下： { "explorer.confirmDelete": false, //配置eslint "eslint.autoFixOnSave": true, // 启用保存时自动修复,默认只支持.js文件 "eslint.validate": [ "javascript", // 用eslint的规则检测js文件 {
vscode使用eslint保存代码自动格式化的坑
DyuanH的博客
02-23 434
坑挺多的，查了很多资料弄好了，大家可以参考一下主要是为了识别.eslintrc.js文件，格式化vue，js，ts文件。
vscode配置eslint自动格式化
weixin_47627102的博客
06-18 1733
打开，然后找到扩展，再找到ESlint，最后点击在settings.json中编辑，随便点一个，打开的都是同一个文件。
prettier设置内容
可以叫我啪叽的石头
11-19 1261
module.exports = { // 使用 2 个空格缩进 tabWidth: 2, // 不使用缩进符，而使用空格 useTabs: false, // 行尾需要有分号 semi: true, // 使用单引号 singleQuote: true, // 对象的 key 仅在必要时用引号 quoteProps: 'as-needed', // jsx 不使用单引号，而使用双引号 jsxSingleQuote: false, // 末尾不需要逗号
vscode 插件与 npm 包，保存时自动修复代码格式错误
无
11-04 6332
前言   日常开发中的绝大多数项目，都是以团队为单位进行的。而由于每个成员的代码习惯和编码差异的不同，最终将导致整个项目的代码参差不齐，出现各式各样风格的代码。   而此差异性会严重导致团队协作效率低下，后期可维护性也会严重降低。例如代码缩进问题，大部分都是以2个或者4个空格为标准，倘若在没有格式化工具的前提下，迭代起来就会显得异常麻烦，只能逐行添加或者删除空格，不仅浪费时间也毫无意义。   因此制定统一规范的代码风格，并以此配置出格式化工具显得尤为重要，并且最好是在开发中就将此问题解决掉，于代码运行之前.
vscode配置ESLint+Prettier - Code formatter+Vetur
weixin_42645490的博客
10-30 3020
首先是安装ESLint+prettier+vetur: vscode 搜索安装即可，然后是注意package是否有这些： 没有的话npm安装。 之后就是配置这个文件： module.exports = { root: true, parser: 'babel-eslint', parserOptions: { sourceType: 'module', }, env: { browser: true, node: true, }, extends:
解决在vscode中eslint在vue后缀文件中保存时无法自动格式化的问题
qq_38472535的博客
05-31 707
解决在vscode中eslint在vue后缀文件中保存时无法自动格式化的问题
vscode 检查c代码语法和补全_VScode下搭配ESLint、TSLint、stylelint的代码检查配方
05-25
在 VScode 中使用 ESLint、TSLint、stylelint 进行代码检查，可以通过以下步骤进行配置： 1. 在 VScode 中安装 ESLint、TSLint、stylelint 插件。 2. 在项目根目录下创建配置文件 .eslintrc.json、tslint.json、.stylelintrc.json，分别存放 ESLint、TSLint、stylelint 配置。 3. 在 VScode 的 settings.json 中配置： ``` { "eslint.enable": true, "eslint.options": { "configFile": "${workspaceFolder}/.eslintrc.json" }, "tslint.enable": true, "tslint.configFile": "${workspaceFolder}/tslint.json", "stylelint.enable": true, "stylelint.configFile": "${workspaceFolder}/.stylelintrc.json" } ``` 4. 在 VScode 中打开要检查的项目，即可自动进行代码检查。 此外，也可以在 VScode 中安装 Prettier 插件，配合 ESLint、TSLint、stylelint 使用，以实现自动代码格式化。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值