关于webstorm-----eslint一键自动修复所有错误

最新推荐文章于 2024-05-17 14:08:31 发布
最新推荐文章于 2024-05-17 14:08:31 发布
阅读量1.1w 收藏 8
点赞数 4
分类专栏： 前端技术 文章标签： eslint一键格式化 自动排版 webstorm
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43906101/article/details/88265041
版权

刚上手VUE，eslint的严格样式有点不适应，严重影响开发效率。现在发现webstrom有一个自动修改格式的功能。具体操作步骤如下

1.安装部分自行度娘，保存文件后发现一堆bug,其中包括script各种空格排版等格式问题

在这里插入图片描述

2.如何解决？ 以下步骤（File > setting > 搜索eslint > 点击 eslint ）
在这里插入图片描述

3.勾选 Enable
在这里插入图片描述

4.勾选Configuration file， 指定 .eslintrc.js 路径 , 位置在项目名称目录下，选择后Apply确认
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

5. 鼠标置于任意一个红色波浪线处， 按 ALT + SHIFT + Enter
在这里插入图片描述
6. 保存，收工
在这里插入图片描述
在这里插入图片描述

于老斯
关注
  • 4
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
WebStorm-2021.3.2.exe
05-03
1. 改进的ESLint集成：增强了对ESLint规则的支持，包括自动修复功能，使得开发者可以更快速地遵循编码规范。 2. TypeScript支持：随着TypeScript的广泛应用，WebStorm在2021.3.2版本中可能提升了TypeScript的智能...
webstrom 配置eslint 自动修复错误
大啵鱼
03-07 7698
webstrom 配置eslint 自动修复错误1、展示效果如何给vue项目添加eslint呢，如何自动修复呢？先展示一下效果：GIF.gif2、配置步骤1、安装插件ESLint pluginwebstrom 其实有个非常好用的插件，ESLint plugin(如果在先安装不来可以手动下载，下载地址https://plugins.jetbrains.com/plugin/7494-eslint)i...
Eslint 在PhpStorm /Webstrom 中配置自动修复
廖圣平
03-14 2157
在用PHPStrom中，如果有安装eslint，但是没有执行修复，会出现红色的警告标志，在vscode 中自动修复eslint格式： 可选项=》设置=》右上角配置 "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, "eslint.format.enable": true, 在phpstrom 中如果版本大于2020.3.1 会有自动修复的按钮，如图： 但在之前的版本则要用到phpstro..
Eslint自动修复突然不生效了，解决方案，亲测有效
最新发布
qq_41920758的博客
05-17 474
版本号是1.7.0，eslint自动升级到2.4.4出现了问题，回退到2.4.2就可以了。在vscode中找到ESLint扩展应用，安装之前的版本，然后重新加载就可以了。之前用了很久都没问题，今天打开项目突然不好用的，一般就是插件版本问题。打开vscode底部状态栏，查看eslint的输出，提示版本问题。完美，重新加载之后就可以用了，太好用了。
【一条指令解决】WebStorm中自动修复ESLint所有错误
IT菜鸟
06-22 6112
一、配置运行命令 添加【"lint-fix":"eslint --fix --ext .js,.vue src"】，运行npm run lint-fix便可以格式化所有的代码 "scripts": { "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", "st...
Webstorm之ESLint自动修复
段占彪的博客
12-17 6656
ESLint自动修复 针对上一篇的errors potentially fixable with the --fix option.报错问题，我提到给你的编辑器里装一个eslint 插件。这一 篇我就说一下这个插件怎么安装 我们先看一下安装之后的效果 步骤 1. 安装插件 npm i -g eslint 2.安装成功之后打开 这个是mac版（提示：mac版打开sittings 的快捷键是com...
WebStorm 保存时自动格式化代码 eslint修复
xn999999的博客
03-18 1050
WebStorm 保存时自动格式化代码 eslint修复
WebStorm-2021.1
02-09
WebStorm-2021.1
WebStorm-2019.2.exe
05-03
WebStorm-2019.2.exe
WebStorm-2019.3.4.exe
09-07
webStorm-2019.3，WebStorm 是jetbrains公司旗下一款JavaScript 开发工具。被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”，vue开发非常便捷。
webstorm-styled-components:样式组件突出显示IntelliJ编辑器中的支持
04-23
Webstorm样式的组件 支持样式组件 :nail_polish: 在WebStorm中 该插件可以安装在WebStorm，IntelliJ IDEA Ultimate，PhpStorm，PyCharm Pro和RubyMine v2017.2及更高版本中。 安装 要安装插件，请打开“ IDE ...
WebStorm设置eslint自动修复代码功能
CF西西的专栏
12-16 2525
原理很简单，利用插件监听文件发现不合规范的自动更新即可。 有两步 1、打开webstorm，在Preferences中点选plugins，检查FileWatchers是否已经安装 2、再次去到Preferences，在Preferences中点选Tools，找到FileWatchers项，增加一个监听的任务。 按如下配置项进行配置： File type: Any (or JavaS...
webstorm配置ESLint并自动修复 autofix problems
SunShinessx的博客
02-13 4575
1.在项目中安装eslint 1.npm install eslint --save-dev 2.npm install eslint-loader --save-dev 3.npm i -D babel-eslint standard   2.新建eslintc.js编辑lint规则，eslintignore忽略lint的文件 eslintc.js配置参考，或者也可以参考官网配置：...
WebStorm配置eslint检查自动格式化(自动解决eslint问题\Vue3项目解决ESLint问题)
一方湖泊
03-12 6103
参考
webstrom js文件报eslint错误解决方法
weixin_44384273的博客
05-10 618
webstorm eslint 报错
如何在webstorm使用eslint检查代码规范
谢小鱼的博客
11-26 3220
一、安装esLint （一）打开项目代码，进入terminal （二）安装esLint 1、安装esLint npm install eslint --save-dev 2、设置一个esLint的配置文件 eslint --init 3、之后可以在项目中任何地方使用eslint检查代码 eslint ./static/config.js 这样配置完成后，项目代码中不规范的地方esLint会...
vue 一键修复eslint问题（webstorm）（已解决）
weixin_43444977的博客
12-01 1662
如果有很多eslint问题，可以使用快捷键一键修复eslint问题。 在webstorm 的setting ——Keymap——搜索 Fix ESLint problems ,自定义快捷 键，然后在有eslint问题的页面，敲快捷键，就可以一键修复了
webstorm element-plus
08-19
要在WebStorm中使用Element Plus，你需要先通过命令行工具将Element Plus安装到你的Vue项目中。你可以使用以下命令之一来安装Element Plus： 1. 使用npm： ``` npm install element-plus --save ``` 2. 使用yarn： ``` yarn add element-plus ``` 3. 使用pnpm： ``` pnpm install element-plus ``` 接下来，你需要在你的Vue项目的`main.js`文件中引入Element Plus。你可以按照以下步骤操作： 1. 在`main.js`文件中导入`createApp`函数和Element Plus： ```javascript import { createApp } from 'vue' import ElementPlus from 'element-plus' import 'element-plus/dist/index.css' ``` 2. 在`main.js`文件中创建Vue应用实例并使用Element Plus插件： ```javascript const app = createApp(App) app.use(ElementPlus).mount('#app') ``` 这样就成功将Element Plus引入到你的Vue项目中了。 关于如何在Vue组件中使用Element Plus的具体示例，你可以在Element Plus官方文档中找到对应的组件代码。你可以从官网复制相应的组件源代码，然后将其粘贴到你的Vue组件中进行使用。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [WebStrom创建Vue3+Element-Plus项目](https://blog.csdn.net/weixin_45580378/article/details/126912660)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [Web篇_06 搭建Vue项目（Vue3+Element Plus+Vue-cli+Webstorm）](https://blog.csdn.net/qq_58099084/article/details/124702197)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值