vscode使用eslint保存代码自动格式化的坑

最新推荐文章于 2023-05-16 21:34:46 发布
最新推荐文章于 2023-05-16 21:34:46 发布
阅读量444 收藏 1
点赞数
分类专栏： 2023 文章标签： vscode vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/DyuanH/article/details/129185157
版权
文章指导如何配置VSCode以使用eslint和volar插件来格式化.vue、.js和.ts文件。步骤包括安装eslint和相关插件，设置VSCode的formatonsave和defaultformatter，以及处理依赖项。如果遇到问题，可通过npxeslint检查文件并解决版本不兼容的错误。
摘要由CSDN通过智能技术生成

坑挺多的，查了很多资料弄好了，大家可以参考一下

主要是为了识别.eslintrc.js文件，格式化vue，js，ts文件

1. 安装 eslint，volar插件

不过多解释

2. vscode设置

format on save 打开
default formatter 设置为eslint

3.安装依赖项

eslint-config-prettier， eslint-plugin-prettier，prettier，如果在创建vue项目时没使用eslint，需要额外安装其他依赖，见最后的图片

如果没有成功
  • 通过npx eslint [file]看下有没成功运行，有检测内容的话重启一下vscode就行了
  • 如果是报错的话可能有版本不对的问题（坑）

参考一下我的版本，这份可用
在这里插入图片描述

DyuanH
关注
专栏目录
vscode eslint 快速配置（保存自动格式化）
https://shixuebin.gitee.io/hexo-blog/
11-24 488
安装就不说了，安装后打开vscode设置，搜索eslint，然后点击setting.json写入如下代码。
vscode设置保存时自动按eslint+prettier格式化
weixin_38705829的博客
03-24 1679
eslintprettiereslint-plugin-prettiereslint-config-prettier新建.eslintrc.js文件，extends末尾添加eslint插件plugin:prettier/recommended，由 eslint-plugin-prettier插件提供，它可以帮助你自动格式化代码，使代码风格更加一致和美观。 官方提供了一个 ESLint 插件 eslint-plugin-prettier。这个插件的主要作用就是将 作为 的规则来使用，相当于代码不符合
vscode的格式化问题
weixin_57750091的博客
07-13 826
vscode的格式化问题一、先下载插件二、在setting.josn配置三、配置.editorconfig文件https://editorconfig.org 一、先下载插件 在插件商店中下载三个插件 Beautify、Eslint、Vetur 二、在setting.josn配置 { // tab 大小为2个空格 "editor.tabSize": 2, // 100 列后换行 "editor.wordWrapColumn": 100, // 保存时格式化 "
vscode配置eslint,实现文件保存使用eslint格式化，问题1.扩展名‘eslint‘被配置为格式化程序，但它无法格式化’JavaScript‘文件。2.eslint命令无法执行
lingliu0824的博客
04-11 2万+
当项目中使用了eslint时，如果保存时不使用eslint格式化，运行时可能会由于个人编码习惯出现很多问题，所以期望在保存时能够自动根据eslint配置格式化文档。 eslint 配置完成后始终不生效问题 首先说一下eslint配置完后，始终不生效的问题，我之前使用的多模块项目，每个模块独立，但是始终有一个模块的eslint不生效，把模块内容复制到其他模块或新建模块都ok。最终解决：重启eslint。具体操作如下： 1.在vscode中使用快捷键ctrl+shift+p打开命令输入框 2.输入eslint
【VScode】保存文件自动按照eslint规范格式化
joanmelon的博客
09-13 2515
window电脑：文件 > 首选项 > 设置 打开 VSCode 配置文件setting.json。mac电脑code>首选项 >设置。第二步：根目录添加.eslintrc.js文件。第二步： 安装插件：eslint和vetur。作用：校验代码，编写eslint规则。第一步：全局安装eslint。第三步：自动格式化设置。
Vscode保存代码自动按照ESlint规范保存
爱吃肉的洋
05-07 625
首先在打开VScode在应用商店下载 ESlint应用 第二步 打开设置 找到setting文件 第三步 清空setting文件中原有的配置，将如下配置粘贴进去，保存。 { "workbench.colorTheme": "Atom One Dark", "sync.gist": "8626d23745117be1a468437821b8485a", "sync.r...
Vue项目vscode 安装eslint插件的方法(代码自动修复)
10-15
本文将详细讲解如何在Visual Studio Code (VSCode) 中安装和配置ESLint插件，实现代码自动修复功能，特别是针对Vue项目的设置。 首先，ESLint是一个静态代码分析工具，用于检测JavaScript代码中的潜在问题，它可以...
vscode中eslint使用自动保存格式
pengfeng111833的专栏
10-19 1304
1.在vscode的设置扩展中安装eslint插件 2.找到"文件" -> "首选项" -> "设置"(或者： File->Preferences->Settings )，点击右上角，切换到setting.json配置文件，替换为以下代码 { // vscode默认启用了根据文件类型自动设置tabsize的选项 "editor.detectIndentation": false, // 重新设定tabsize "editor.tabSize": 4, // #...
VScode+ESlint 自动格式化代码(2021)
Superman_peng的博客
02-21 1万+
本文用 Vue 项目做示范，基于项目已有eslint环境。 利用 Vue CLI 创建项目时要将 ESlint 选上，下载完依赖后，用 VSCode 打开项目。 1、安装插件 ESLint， 2、配置eslint插件 File -> Preference-> Settings（如果装了中文插件包应该是 文件 -> 选项 -> 设置），搜索 eslint，点击 Edit in setting.json 将以下选项添加到配置文件 //配置eslint "eslint.val
Vue-cli Eslint在vscode里代码自动格式化的方法
08-27
在 Visual Studio Code (VS Code) 中，我们可以集成 Eslint 来实现代码自动格式化，这样在保存文件时，代码会自动按照预设的规范调整格式。 1. **Vue CLI 中的 Eslint 集成** Vue CLI 默认已经包含了 Eslint 配置...
【问题解决】VSCode ESLint 保存格式化时不生效
我要手撕源码的博客
04-11 3446
问题描述 VSCode 中安装了 Prettier 和 ESLint 插件，在项目中使用了 .eslintrc.js 文件规范项目代码。 但是保存代码时格式化并不是按该文件的配置而是按 Prettier 的配置 问题解决 修改 Settings.json 文件 win：ctrl + shift + p mac：command + shift + p { // ... // 注意这个是 false，很大原因都是因为这个 "editor.formatOnSave": false, "editor
vscode保存时自动代码格式化eslint(针对vue)
最新发布
weixin_60505218的博客
05-16 2751
以上就是全部设置过程，如有不妥，望沟通交流。OK，设置完毕啦，赶紧去试试吧~
eslint或stylelint配置完之后vscode无法自动格式化问题的解决办法
进击的火山博客
12-19 4487
配置了eslint和stylint规则之后，想要vscode在保存的时候自动帮你格式化修改。你需要安装对应的插件和开启对应的设置选项。本文忽略如果配置eslint和stylint规则，直接讲后面的部分。 1. 在项目中设置推荐安装插件 每个人都可以手动安装这两个插件，但在团队开发中，你无法保证每个成员都会自己手动安装，所以你可以在项目下设置一个.vscode/extensions.json 文件，这样项目被vscode打开就会检测本地是否有这两个插件，没有就会弹出提示。 { "recommend
vscode配置eslint格式化vue，eslint不好使的问题（推荐）
hsany330的专栏
03-14 841
前言 最近发现公司的项目代码修改保存后，代码会自动进行格式化。但是自己搭建的小项目不能进行格式化，虽然安装了一个格式化插件，但是格式化的效果很不舒服。 ESLint官方中文文档 实现 安装eslint插件 上面只是在vscode里安装了，实际项目里还需要安装 npm install eslint babel-eslint -D 1 生产配置文件 ./node_modules/.bin/eslint --init 1 运行完会有以下提示： 你要如何使用ESLint，选择第三个 看自己项目的实际
VScode eslint 格式化问题
TIANDI0808的博客
11-27 1134
eslint检测开启时会检测行末尾分号等，vscode 自动格式化会自动添加分号，括号，单引号变成双引号等，为了方便编码，需要进行一系列配置 1、vscode插件添加eslint 2、vscode界面菜单： 文件->首选项->设置，进入settings.json，修改配置为： { "eslint.autoFixOnSave": true, "eslint.validate":...
VScode代码Prettier格式化及ESLint语法检测
热门推荐
lihefei_coder的博客
07-28 2万+
VScode代码Prettier格式化及ESLint语法检测
vscode eslint 自动格式化代码 不好用_VS Code Prettier + ESlint 格式化Vue代码及遇到问题...
weixin_40005437的博客
11-22 874
介绍prettier​prettier.ioprettier是一个专业代码格式化工具，支持JS、TS、sass、less、HTML、java、yaml、md、swift等等，主流的语言大多都支持。提供了VS、VSC 、Vim 、Atom、sublime 、WebStorm 等 IDE/编辑器插件，可以很方面安装及使用。下面介绍下 vscode 下的 配合eslint检查 vue代码的相关配置介绍和...
vue vscode 比较好看的eslint风格检测，和保存自动格式化
Jkssns的博客
10-15 347
1、cnpm i eslint eslint-plugin-vue 2、vscode中下载安装ESLint插件 2、在src同级目录下创建.eslintrc.js文件 3、复制以下代码 module.exports = { "root": true, "env": { "node": true, "browser": true }, "extends": [ "plugin:vue/vue3-essential", "eslint:recommended"
vsCode格式化Eslint的巨坑
Establish_bug的博客
01-13 1818
首先需要找到setting.json设置文件 然后把这段代码放进setting.json中重启vscode即可 之前做的项目其实都没有设置eslint,然后现在的项目需要eslint规范代码,然后就有问题了,一直在警告规范不过关啊,尤其用echarts的数据粘贴过来的简直巨坑,只能使用单引号,不需要分号,方法的括号前后都要有一个空格,可气的是vscode的自动格式快捷键跟eslint是相悖的,自己...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值