前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >专栏 >webstorm根据eslint保存的时候格式化代码

webstorm根据eslint保存的时候格式化代码

作者头像
全栈程序员站长
发布于 2022-09-06 07:28:03
发布于 2022-09-06 07:28:03
3K0
举报

大家好,又见面了,我是你们的朋友全栈君。

前言:

用webstrom把vue项目设置eslint规则,然后保存的时候根据eslint规则格式化当前组件的代码

目录:

操作步骤:(参考入口)

1、点击settings->pluings ->搜索eslint-> Install安装 ​​2、 安装好之后,找到settings中ESLint,选中,就会进入配置页面,

3、到这一步,实际规则已经配置好了,下来就是调用的问题了,搜索keymap,然后把右边的去掉,改成esli ,就可以看到 Fix ESLint Problems了,然后右键新增快捷键 Alt+F,

4、最后一步,页面上验证,写完代码,然后点 Alt+F 看看页面有没有跟着你的规则变,变就成功了


操作步骤:(参考入口)

1、点击settings->pluings ->搜索eslint-> Install安装

2、 安装好之后,找到settings中ESLint,选中,就会进入配置页面,

勾选Enable->

第一项配置自己安装nodejs目录下node.exe,

第二项配置当前项目中node_modules/.bin目录下的eslint.cmd,

第三项改成.eslintrc.js (自定义的校验规则,非必须)

3、到这一步,实际规则已经配置好了,下来就是调用的问题了,搜索keymap,然后把右边的去掉,改成esli ,就可以看到 Fix ESLint Problems了,然后右键新增快捷键 Alt+F,

4、最后一步,页面上验证,写完代码,然后点 Alt+F 看看页面有没有跟着你的规则变,变就成功了

发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/134507.html原文链接:https://javaforall.cn

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022年6月6,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
WebStorm 配置 ESLint
# ESLint 什么是 ESLint ? ESLint 是在 ECMAScript/JavaScript 代码中识别和报告模式匹配的工具,它的目标是保证代码的一致性和避免错误 为什么需要它? 辅助编码规范执行,有效控制代码质量;遵守良好的规范可以让一个人少犯错误,在团队协作中,保障一个团队代码风格相同,避免低级 Bug # WebStorm 配置 安装插件 ESLint 2. 开启 ESLint 打开:File | Settings | Languages & Frameworks | Java
cnguu
2020/10/12
7.2K0
Eslint配置及格式化代码
官方网址:https://eslint.org 中文网址:https://eslint.bootcss.com
华创信息技术
2019/11/08
9440
Eslint配置及格式化代码
WebStorm使用 webstorm快捷键
WebStorm 是 JetBrains 推出的一款商业的 JavaScript 开发工具
全栈程序员站长
2022/09/10
2.7K0
WebStorm 2021.1 使用 ESLint自动格式化代码[通俗易懂]
WebStorm 不能像 VSCode 那样在保存的时候自动 Fix-ESLint,不能自动格式化代码,需要安装一个插件
全栈程序员站长
2022/08/23
3.2K0
WebStorm 2021.1 使用 ESLint自动格式化代码[通俗易懂]
Eslint配置
开发的过程中不同的编辑器,不同的格式化插件对应的代码格式都有差异,这就导致代码风格不一致或是合并冲突。
码客说
2022/09/19
2.8K0
Eslint配置
ESlint + stylelint + VSCode自动格式化代码(2020)
利用 Vue CLI 创建项目时要将 ESlint 选上,下载完依赖后,用 VSCode 打开项目。
谭光志
2020/09/28
2.4K0
webstorm 2020.3 格式化代码快捷键
3、在左上角的搜索栏中输入【keyMap】,在右边的搜索框中输入【format】,出现下面框架中,【Reformat】的快捷键【ctrl+alt+L】或者【ctrl+shift+f】
全栈程序员站长
2022/06/29
1.4K0
webstorm 2020.3 格式化代码快捷键
梳理前端开发使用 eslint 和 prettier 来检查和格式化代码问题
一、问题痛点 在团队的项目开发过程中,代码维护所占的时间比重往往大于新功能的开发。因此编写符合团队编码规范的代码是至关重要的,这样做不仅可以很大程度地避免基本语法错误,也保证了代码的可读性。 对于代码版本管理系统(svn 和 git 或者其他),代码格式不一致带来的问题是严重的,在代码一致的情况下,因为格式不同,触发了版本管理系统标记为 diff,导致无法检查代码和校验。 但是需要知道的是,开发规范不仅仅包含代码格式规范,还有很多内容,这里只是单独说明代码格式化规范而已。 (一)关于代码格式规范问题 代
前端正义联盟
2018/06/20
2.5K0
webstrom格式化代码和常用的快捷键[通俗易懂]
今天我就遇到以一个问题,就是我用java生成的html文档是不规范的,但是我需要将文档规范化排查一些问题。
全栈程序员站长
2022/08/20
7.1K0
webstrom格式化代码和常用的快捷键[通俗易懂]
使用ESLint & Prettier美化Vue代码
Prettier 是一个有见识的代码格式化工具。它通过解析代码并使用自己的规则重新打印它,并考虑最大行长来强制执行一致的样式,并在必要时包装代码。如今,它已成为解决所有代码格式问题的优选方案;支持 JavaScript、 Flow、 TypeScript、 CSS、 SCSS、 Less、 JSX、 Vue、 GraphQL、 JSON、 Markdown 等语言,您可以结合 ESLint 和 Prettier,检测代码中潜在问题的同时,还能统一团队代码风格,从而促使写出高质量代码,来提升工作效率。 备
晚晴幽草轩轩主
2018/06/19
3.5K0
推荐 33 个 IDEA 最牛配置,写代码太爽了!
blog.csdn.net/fly910905/article/details/77868300
Java技术栈
2019/09/24
3.3K0
推荐 33 个 IDEA 最牛配置,写代码太爽了!
ESLint+Prettier格式化代码
ESLint会做语法检查,ESLint fix的功能已经可以解决绝大部分代码格式化问题,大部分情况可以替代Prettier的美化,但是也有一些情况,比如max-len,ESLint不能自动fix,手动修改非常繁琐,所以还是要用Prettier,但是两者格式化代码,可能会产生冲突,也是让人很烦恼。通过查资料,找到一种ESLint+Prettier格式化代码和平共处的方案,现在记录一下。本文会以VSCode编辑器为示例做说明。
DamonLiu
2022/04/12
1.4K0
使用VS Code开发asp.net core
下载地址: https://code.visualstudio.com/
solenovex
2018/02/17
5.9K0
使用VS Code开发asp.net core
前端代码乱糟糟?是时候引入代码质量检查工具了
为了统一团队的代码规范,除了一纸规范说明之外,还需要引入工具进行限制。虽说工具并不能完全实现规范中的规则,但至少能够在一定程度上缓解代码不统一的局面。
书童小二
2018/09/03
2.8K0
前端代码乱糟糟?是时候引入代码质量检查工具了
IDEA 配置优化32招
blog.csdn.net/fly910905/article/details/77868300
南风
2019/11/07
2.3K0
IDEA 配置优化32招
推荐 IDEA 最牛配置,好用到飞起来!
1、设置maven 1、在File->settings->搜索maven 2、Mavan home directory–设置maven安装包的bin文件夹所在的位置 3、User settings file–设置setting文件所在的位置 4、Local repository–设置本地仓库的
芈亓
2022/06/13
8110
Intellij IDEA就这样配置,快到飞起!
blog.csdn.net/fly910905/article/details/77868300
用户2242639
2021/07/23
2.1K0
Intellij IDEA就这样配置,快到飞起!
webpack-eslint
ESLint 是一个插件化的 JavaScript 代码检测工具,它可以用于检查常见的 JavaScript 代码错误,也可以进行 "代码规范" 检查,在企业开发中项目负责人会定制一套 ESLint 规则,然后应用到所编写的项目上,从而实现辅助编码规范的执行,有效控制项目代码的质量。在编译打包时如果语法有错或者有不符合规范的语法就会报错, 并且会提示相关错误信息
程序员 NEO
2023/09/28
2330
webpack-eslint
IntelliJ IDEA 从入门到上瘾教程,2019图文版!
如果说IntelliJ IDEA是一款现代化智能开发工具的话,Eclipse则称得上是石器时代的东西了。
Spark学习技巧
2019/05/16
7870
IntelliJ IDEA 从入门到上瘾教程,2019图文版!
团队开发中我都建议这样配置IDEA
先将焦点定位到双引号里面,使用alt+enter快捷键弹出inject language视图,并选中Inject language or reference。
JAVA葵花宝典
2019/08/15
2K0
团队开发中我都建议这样配置IDEA
相关推荐
WebStorm 配置 ESLint
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文