WebStrom 与 eslint 格式化代码冲突

最新推荐文章于 2025-06-18 10:20:52 发布
最新推荐文章于 2025-06-18 10:20:52 发布
阅读量4.3k 收藏 3
点赞数
CC 4.0 BY-SA版权
分类专栏： Web 文章标签： WbeStorm Prettier Vue 格式化 警告
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/starhosea/article/details/89709127
本文介绍如何在Vue项目中使用ESLint+Prettier控制代码风格时，解决WebStorm格式化代码工具与之产生的冲突。通过调整WebStorm设置，使用Prettier替代内置格式化工具，实现代码风格一致。

问题

当Vue项目采用了 eslint+prettier 控制代码风格时，WebStorm 默认的格式化代码（Reformat Code） 会和这套工具的代码风格冲突。具体表现是：我们是用 Ctrl+Shift+F 格式化代码，格式化后WebStrom 反而出现很多黄色警告。
在这里插入图片描述

解决

采用 prettier 来格式化代码，不使用 WebStrom 自带代码格式化工具。

打开WebStorm ， File->Settings->Keymap，搜索 reformat ，找到 ReformatCode 和 ReformatCode with Prettier， 将常用的格式化快捷键 Ctrl+Shift+F 设置给后者。
在这里插入图片描述

解决eslint与webstorm关于script标签的缩进问题
weixin_41224029的博客
10-09 861
问题重现： 在vue-cli中，使用eslint时会对代码进行校验，其在.vue文件中支持的是不缩进，如下所示：在这里插入图片描述 而在webstorm中使用格式化代码会将代码格式化为： 这样子就不符合eslint的要求了，如果想支持webstorm的编码格式，应该进行如下设置： 打开项目根下的.eslintrc.js文件，将rules节点添加如下配置项： rules: { 'vue/sc...
Webstrom史上总结超实用教程
Camel
04-11 821
1. 配置 Webstorm 安装项 选择 64 位，防止桌面 Webstorm 快捷方式打不开。 2. 是否导入 Webstorm 配置信息 这里的意思是之前使用过 Webstorm ，并且配置过，Webstorm 配置信息可以起到优化性能的作用，因为它本身是个比较吃内存的东西，文件多了容易卡顿，可以通过在配置文件中得到优化，后面单独介绍优化。 剧透：Webstorm 安装完成后配置信息位置：...
webstrom格式化与eslint配置冲突解决办法
qq_34532969的博客
03-14 1843
WebStorm自带的格式化（Ctrl+Alt+L）和 ESLint冲突，经常遇到的是缩进不一致导致的错误，CodeStyle里没办法再做调整的可以通过修改ESlint配置， 添加ignoredNodes,就可以设置eslint忽略这些节点的校验。 // ignoredNodes里面写你要让哪些节点不做校验。 indent: ["error", 2, { "ignoredNodes": ["CallExpression", "Identifier"] }] 以下是所有可以忽略的节点，如果不清楚用哪些的话
webstorm格式化代码与eslint冲突的问题
Coder Ben's Writing
06-29 4785
升级webstorm版本后，格式化代码后，代码风格可能与之前会有区别，导致看着别扭，eslint还飘红。 解决方式是启用自定义的code style设置。截图如下： 如果设置里没有这个选项，则可以在项目根目录下添加.editorconfig文件，示例内容如下： root = true [*] charset = utf-8 end_of_line = lf indent_size = 2 indent_style = space insert_final_newline = true trim_trai
VSCODE - ESLINT格式化代码
最新发布
weixin_59960958的博客
06-18 861
用户区：应用于当前操作系统用户，只要是在当前电脑上开发，任意项目都会生效该配置（慎重修改）工作区：只应用于当前项目，如果更换项目配置会失效。ctrl + k 再 ctrl + f。⚠️注意：这里默认的是用户区，请留意。于此设置完毕，重启vscode。
解决webstorm代码格式化与eslint-vue 缩进规则冲突
qq_40593496的博客
04-24 1937
webstorm 设置Vue中 Script 标签首层不缩进解决方法1（放弃缩进）：解决方法2（仍要缩进）： webstorm 的缩进规则与 eslint-vue 冲突， webstorm格式化后如下： <script> exports default { } </script> eslint-vue规则限制如下： <script> exports default { } </script> 解决方法1（放弃缩进）： 修改 Webstorm
WebStorm VUE代码格式化后ESLINT报错缩进问题,重新配置代码格式化的方法
zyzhan
03-02 2762
WebStorm配置代码格式化 配置WebStorm的代码格式化功能，使自动代码格式后符合ESLint+Prettier代码检测规范。 通过vue-cli脚手架工具搭建vue项目时，会让我们选择是否配置ESLint（代码检测工具），很多人会选择No，因为一旦有了检测，会降低开发效率（经常报错）。 　　但我在实际工作中会选择配置它。 　　因为一方面可以养成良好的代码习惯，写出来的代码可读性高， ...
配置webstorm按eslint规则自动格式化代码
Sunny_lxm的博客
07-10 2015
配置webstorm按eslint规则自动格式化代码
webstrom eslint插件
12-28
当同时启用 Prettier 进行代码格式化时，可能会遇到两者之间存在竞争的情况。为了避免这种情况发生，可以在项目根目录创建 `.eslintrc.json` 文件指定兼容性的预设，并考虑引入 `eslint-config-prettier` 关闭可能...
webstorm课程练习final1.rar
01-09
7. **插件安装与使用**：学习如何在WebStorm中安装和配置各种插件，以扩展IDE的功能，例如Prettier用于代码格式化，ESLint用于代码规范检查。 通过这个练习，你将不仅学会WebStorm的基本操作，还能提升你的前端开发...
vite+vue3+ts+ant design vue+tailwindcss搭建前端web应用（1）
TJ1532635942的博客
08-23 5039
本文编写的目的是为了基于vite、vue3、ts搭建开箱即用的前端应用框架模板，会实现axios、vue-router和pinia的封装和基本使用。
webstorm 格式化代码Ctrl+alt+L 失效
小超人日常码字
09-02 900
网易云的喜欢歌曲 全局快捷键 与webstorm快捷键冲突 清空网易云快捷键就好了
webstorm 格式化代码Ctrl+alt+l 失效
此去经年的博客
09-02 769
webstorm与 网易云 / QQ / 网易有道词典的快捷键冲突，关掉网易云的快捷键就OK了。
【WebStorm 】WebStorm 保存时格式化代码
qq_39291270的博客
02-03 2165
WebStorm 保存时格式化代码
如何优雅的让Webstorm按照eslint规则reformat
wjc133的专栏
07-13 2413
前端项目中经常会有不同的规范，比如Airbnb的stardend标准，要求每行结尾不加分号、字符串必须使用单引号等。但Webstorm中有自己的一套代码规范，格式化的时候根本不按照eslint来，怎么才能让Webstorm遵循eslint的规则呢？...
Webstom 代码格式化快捷键 使用项目中的Prettier
爱孔孟
05-26 1475
在现代的前端开发中，代码格式化是非常重要的一项工作，可以提高代码的可读性和可维护性。然后，在弹出的对话框中，勾选 Run on ‘Reformat Code’ action 复选框，这样每次通过快捷键执行代码格式化操作时，都会自动调用 Prettier 来进行格式化。我们可以使用默认模式，也可以按照官方文档中的说明进行自定义。总的来说，将 Prettier 设置为默认的格式化程序是非常有用的，可以帮助我们提高代码的可读性和可维护性，从而更加高效地进行前端开发工作。首先，我们需要在设置对话框中找到。
webstorm 格式化代码报错_WebStorm2020.2版本使用体验
weixin_39939303的博客
12-20 854
前言昨天WebStorm推送了2020年的第二个版本更新，第一时间上手体验了一波，这次的版本更新做了很多使用上的优化，接下来就跟大家分享下这次新版本都有哪些新特性，欢迎各位感兴趣的开发者阅读本文。新特性一览本次更新带来了很多体验上的提升，接下来就跟大家分享下本次都更新了哪些东西。使用Prettier作为代码格式化工具之前版本中我们在使用菜单栏中的Code -> Reformat Code进行...
设置WebStorm编辑器格式化代码的样式
qq_49143427的博客
07-22 4772
我们可以通过设置 WebStorm 编辑器的代码风格，在格式化代码的时候就可以达到我们想要的效果。
webStrom vue eslint 与 prettier冲突
qq_42339350的博客
05-16 918
1 排除两者冲突 eslint-config-prettier yarn add eslint-config-prettier -D .eslintrc.js 'extends': [ "prettier" ], .eslintrc.json "extends": [ "prettier" ] 2 修改代码风格,
webstrom 提示ESlint
04-02
<think>好的，用户想解决WebStorm中ESLint提示的问题，需要配置和常见提示的解决方案。首先，我需要回忆WebStorm如何集成ESLint，可能需要安装ESLint包、启用插件、配置路径等。然后，常见的问题可能有语法错误、代码风格不符合、插件冲突等。 根据用户提供的引用内容，引用[1]提到editorconfig和ESLint，说明用户可能已经配置了editorconfig，但需要注意优先级，因为editorconfig的权重高于编辑器设置。引用[2]提到代码风格不一致的问题，比如变量命名不规范，这需要ESLint的规则来约束。 接下来，我需要分步骤回答：安装配置ESLint，解决常见提示，优化建议。安装部分需要检查Node.js环境，全局或本地安装ESLint，然后在WebStorm中启用。配置部分可能需要配置文件.eslintrc.js，设置规则。常见问题如未安装导致提示不显示，配置未生效，可能与editorconfig冲突，或者规则过于严格，需要调整。另外，自动修复功能的使用也很重要。 可能还需要提醒用户注意项目级别的配置，以及如何排除文件。最后生成相关问题，比如如何集成Prettier，如何自定义规则，如何处理与TS的冲突等。需要确保回答结构清晰，步骤正确，引用相关的引用内容，比如editorconfig的优先级问题。</think>### WebStorm ESLint配置及常见问题解决方案 #### 一、基础配置流程 1. **环境准备** - 确保项目已安装Node.js环境（建议使用LTS版本） - 通过命令行安装ESLint： ```bash npm install eslint --save-dev # 项目级安装 # 或 npm install -g eslint # 全局安装 ``` 2. **IDE配置** - 打开WebStorm的`Settings > Languages & Frameworks > JavaScript > Code Quality Tools > ESLint` - 启用`Automatic ESLint configuration`（自动检测本地安装的ESLint） - 手动指定ESLint路径（当自动检测失败时）[^1] 3. **规则配置** 创建`.eslintrc.js`文件： ```javascript module.exports = { extends: ['eslint:recommended'], rules: { 'no-console': 'warn', 'semi': ['error', 'always'], 'camelcase': 'error' // 强制驼峰命名[^2] }, env: { browser: true, es6: true } }; ``` #### 二、常见提示解决方案 | 问题类型 | 典型提示 | 解决方案 | |---------|---------|---------| | **语法规范** | `Unexpected console statement` | 1. 禁用规则：`'no-console': 'off'`<br>2. 开发环境白名单：`env: { node: true }` | | **格式问题** | `Missing semicolon` | 启用自动修复：`Settings > ESLint > Run eslint --fix on save` | | **命名规范** | `Identifier 'laozibuganle' is not in camel case` | 1. 重命名为驼峰式<br>2. 添加例外规则：`'camelcase': ['error', {allow: ['^laozibuganle']}]` | | **配置冲突** | `Cannot read config file` | 1. 检查`.eslintrc`文件语法<br>2. 清除WebStorm缓存：`File > Invalidate Caches` | #### 三、高级优化建议 1. **与EditorConfig配合使用** - 创建`.editorconfig`文件统一基础格式（缩进/编码/换行符）[^1] - 配置示例： ```ini [*.js] charset = utf-8 indent_style = space indent_size = 2 ``` 2. **集成Prettier** - 安装`eslint-config-prettier`解决规则冲突： ```bash npm install --save-dev prettier eslint-config-prettier ``` - 修改ESLint配置： ```javascript extends: ['eslint:recommended', 'prettier'] ``` 3. **自定义规则覆盖** ```javascript rules: { // 允许特定场景使用非驼峰命名 'camelcase': ['error', { allow: ['UNSAFE_componentWillMount'] }] } ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值