关于在phpstorm中使用和符合eslint规范

最新推荐文章于 2023-06-15 17:17:26 发布
原创 最新推荐文章于 2023-06-15 17:17:26 发布 · 3.3k 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#eslint #phpstorm #vue

本文介绍了如何在PHPStorm中配置ESLint以实现JavaScript代码的规范化。通过简单的两步操作，即可使IDE与ESLint无缝对接，确保项目代码遵循统一的规范。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

这里我们不介绍什么是eslint，也不介绍使用eslint的背景，有兴趣的同学可以自己深入研究，这里只是去使用它，而不是研究它。

 

应公司的新项目需求，规范化代码，也就是说，在以后的项目中我们的js代码必须符合eslint的规范配置.

事实上phpstorm并没有完美支持eslint，必须进行一些配置才能无缝使用。由于网上的资料太少太少。我还是耗费了一点时间。

我整理一下供大家参考：

这是一篇参考的文献（我从中得到灵感，大家看完我的并不一定可以解决，可以从中获取一些信息）：https://cloud.tencent.com/developer/article/1149165

我在eslint进行了2步，然后重启就可以使用了.

(1)preferences>Editor>Code Style>JavaScript

（2）在preferences搜索框查找eslint，如下图：

记得apply保存修改，退出重启，ok

PhpStorm 中文设置教程
拉灯的小手的博客
03-10 5528
本文仅供学习交流使用，如侵立删！demo下载见文末 Pycharm中文设置教程 1.首先打开PhpStorm ，点击file-settings.找到plugins，搜索Marketplace，然后搜索chinese。 2.找到之后直接点击安装. 3.安装完成之后点击Restart。重启之后就是中文版了 PS：尽量使用新版本，旧版没有此插件 本文仅供学习交流使用，如侵立删！ ...
webStorm和phpStorm安装 ESLint 及解决ESLint报错问题
weixin_39177580的博客
07-27 2502
IntelliJ IDEA 安装 ESLint 及解决TypeError: this.cliEngine is not a constructor报错 总结了一下辛历路程: 先检查一下有没有安装ESLint 注意：每个项目都需要安装ESLint 如果没有安装一下，安装步骤： 1、安装ESLint npm install --save-dev eslint babel-eslint eslint-config-alloy 或 cnpm install --save-dev eslint babel-eslin
phpstorm eslint使用
weixin_44365748的博客
06-15 413
phpstorm eslint
php lint,PHPStorm+Eslint入门配置
weixin_31458015的博客
03-10 793
PHPStormPhpStorm 是一款商业的 PHP 集成开发工具，旨在提高用户效率，可深刻理解用户的编码，提供智能代码补全，快速导航以及即时错误检查。EslintESLint是一个用来识别 JavaScript 并且按照规则给出报告的代码检测工具，使用它可以避免低级错误和统一代码的风格。PHPStrom+ESlint配置步骤1：首先确保电脑安装了node.js 具体步骤可参见菜鸟教程2：打开P...
PHPStorm配置ESlint检查代码
劲枫的博客
01-27 5427
1、首先启动ESLint，这样编辑器就可以直接提示哪里有问题 2、ALT+Ctrl+L是PHPstorm自带的快速格式化的缩进量，我们需要配置eslint格式化快捷键。如图添加快捷键ALT+L即可，以后就可以用Alt+L格式化成符合eslint规则的格式代码。 ...
eslint php,eslint缩进配置
weixin_32920055的博客
04-07 218
修改package.json文件安装eslint-plugin-vue，删除eslint-plugin-html。修改.eslintrc.js文件把parser: 'babel-eslint',挪到parserOptions里。在plugins里删除html。在extends里添加'plugin:vue/recommended'。在rules里添加：'indent': 'off','vue/scr...
在PhpStorm中使用PSR2编码规范phpcbf脚本自动修正代码格式
owenzhang的博客
10-25 571
本文已参与「掘力星计划」，赢取创作大礼包，挑战创作激励金。 PSR 规范是个好东西 团队开发约定使用 PSR-2 的编码风格规范，但是并不是所有人都严格按照 PSR-2 来提交代码的 最大的原因就是口头的约束力极为有限，而团队中大家使用的编辑器不统一，有使用 [Php](https://www.oschina.net/p/php)Storm，也有使用 VS Code 的等等，而各种编辑器...
phpStorm-CC-Helpers:这些是在phpStorm中使用我使用的一些开源软件进行代码完成的帮助文件。-Open source php source code
03-25
这些是在phpStorm中使用我使用的一些开源软件完成代码的帮助文件。 阅读每个文件中的注释很重要。 * CodeIgniter CodeIgniter/ * phpBB3 phpBB3.php Some phpBB3 CC fixes * WordPress WordPress/ * ...
DreamWarecs6怎么样让表格居中和在phpstorm中使用？
iheyu(一个新手小白女PHP初学者)
05-02 892
1.插入——>表单——>文本域——>窗口——>输入ID(要输入英文名字)确定； 2.插入——>表单——>按钮——>输入ID(要输入英文名字)确定； 修改按钮里的字 3.按钮——>在属性页面下——>值后面的内容改成——>登录； 4.左键点击改按钮里的字——>选中全部要居中内容——>右键点击要居中的内容——>对齐——&gt...
PhpStorm 格式化中花括号缩进方式
weixin_30249203的博客
10-31 506
格式化前： function func() { return ; } 格式化后： function func() { return ; } 在PhpStorm中的配置：File -> Settings -> Editor -> Code Style -> PHP 转载于:https://www.cnblogs.co...
phpStorm格式化代码快捷键
weixin_30768175的博客
06-05 97
Ctrl+Alt+L 转载于:https://www.cnblogs.com/herizai/p/6945133.html
eslint php,eslint配置
weixin_33795788的博客
04-07 149
首次发表在个人博客eslint配置全局安装npm install -g eslint局部安装npm i -D eslint接下来新建一个配置文件.eslintrc.js,或执行以下命令自动生成eslint --init制定环境要指定配置文件中的环境，请使用env键并指定要启用的环境true。例如，以下启用浏览器和Node.js环境：{"env": {"browser": true,"node": ...
如何在WebStorm中配置ESLint
zhym86848658的专栏
04-17 5250
在vue的项目中，我们有时候会用到eslint去要求开发代码规范一样。以下记录如何在webStorm中使用eslint配置 Setting-->Plugins-->查找eslint-->安装插件 配置ESLint 配置格式化快捷键 通过以上配置你可以在代码里通过Alt + X进行ESLint进行代码规范处理 ...
ESLint报错已解决 ESLint: Initialization error (ESLint). packagePath is not defined
weixin_39177580的博客
07-27 2545
鬼知道自己操作了什么，导致ESLint报错： ESLint: Initialization error (ESLint). packagePath is not defined 如下图： 查了很久在这个文章里看到了一个突破口 https://bbs.youkuaiyun.com/topics/396032159?list=38297183 在应用程序里找到phpStorm右键显示包内容在Contents\plugins\JavaScriptLanguage\languageService\eslint\bin\esl
WebStorm配置eslint检查自动格式化(自动解决eslint问题\Vue3项目解决ESLint问题)
一方湖泊
03-12 8299
参考
彻底解决eslint与webstorm针对vue的script标签缩进处理方式冲突问题（附图）
大道至简
12-08 7583
背景不多介绍了，直接上代码。 打开.eslintrc.js，将rules节点中添加以下配置项。 rules: { 'vue/script-indent': ['error', 2, {'baseIndent': 1}] } 其中第1个2是指统一缩进2个空格，第2个1是指1倍缩进。 ...
phpstorm关闭语法检查的解决方案
MoMo@blog
09-04 8163
看图 原因：项目搭建的时候，安装了eslint，只需要关闭就好 操作：web pack.base.conf.js里注释eslint的代码行
phpstorm 一些警告处理
pkmowang的博客
04-10 2376
一、html 自定义属性 需要alt+enter 二、数据库操作 需要给操作加上try catch捕获异常
webstorm 设置tslint_如何在WebStorm / PHPStorm中保存时配置ESLint自动修复？
weixin_39832727的博客
12-20 283
I am trying to create a custom file watcher in WebStorm that will auto fix ESLint errors on save. In Settings > Tools > File Watchers I created a new file watcher with the following settings:Fil...
c4model 怎么在phpstorm中使用，分析代码画图
最新发布
07-25
<think>我们被要求解决如何在PhpStorm中集成C4Model并用于代码分析与绘图的问题。根据提供的引用，我们知道PhpStorm支持通过插件集成各种工具，而C4Model是一种用于软件架构描述的模型。但是，引用中并没有直接提到C4Model，而是提到了PlantUML和graphviz可以用于画C4架构图（引用[2]）。因此，我们可以推断，在PhpStorm中集成C4Model可以通过安装支持PlantUML的插件来实现，因为C4Model可以使用PlantUML来绘制。 步骤： 1. 安装PlantUML集成插件：PhpStorm有内置的PlantUML支持，但如果没有，可以安装PlantUML插件。 2. 安装Graphviz：因为PlantUML需要Graphviz来渲染图形。 3. 配置C4Model的PlantUML库：C4Model有特定的PlantUML扩展，需要将这些扩展文件配置到项目中。 4. 在PhpStorm中编写C4Model的PlantUML代码并生成图表。 详细步骤： 1. 安装PlantUML插件（如果尚未安装）： - 打开PhpStorm，进入File -> Settings -> Plugins。 - 在Marketplace中搜索“PlantUML”，安装并重启IDE。 2. 安装Graphviz： - 下载Graphviz：https://graphviz.org/download/ - 安装到系统上，并记住安装路径（例如Windows下可能是`C:\Program Files\Graphviz\bin`）。 - 在PhpStorm中配置Graphviz路径：File -> Settings -> Tools -> PlantUML，在Graphviz dot executable中设置dot可执行文件的路径（例如`C:\Program Files\Graphviz\bin\dot.exe`）。 3. 获取C4-PlantUML库： - C4-PlantUML项目提供了用于绘制C4模型的PlantUML宏：https://github.com/plantuml-stdlib/C4-PlantUML - 将项目中的`C4.puml`、`C4_Context.puml`、`C4_Component.puml`等文件下载到本地项目目录中（例如在项目根目录下创建一个`plantuml`文件夹存放）。 4. 在PhpStorm中使用C4Model： - 在项目中创建一个新的PlantUML文件（例如`architecture.puml`）。 - 在文件开头包含C4-PlantUML库，例如： ```plantuml @startuml !include path/to/your/plantuml/C4_Context.puml Person(user, "用户", "使用系统的用户") System(system, "系统", "待描述的系统") Rel(user, system, "使用") @enduml ``` - 然后，在编辑器中右键点击，选择“Diagrams” -> “Show Diagram”，即可预览生成的C4图。 5. 将图表导出为图片或矢量图： - 在打开的图表窗口中，点击工具栏上的导出按钮，可以选择导出为PNG、SVG等格式。 注意事项： - 确保PlantUML配置正确，能够找到Graphviz。 - 如果使用网络代理，可能需要配置PlantUML使用远程服务器（但通常本地安装Graphviz后不需要）。 - 如果遇到包含问题，确保路径正确，或者将C4-PlantUML文件放在与你的puml文件相同的目录下，然后使用相对路径包含。 另外，引用[2]中提到了Diagrams as code的概念，这也正是我们使用PlantUML来绘制C4图的方式，因此可以满足版本控制的需求。 生成的相关问题： 1. 如何在PhpStorm中安装和配置PlantUML插件？ 2. 如何编写C4Model的PlantUML代码？ 3. 如何将C4-PlantUML库集成到项目中？ 4. 如何导出高质量的架构图？ 5. 除了C4Model，PlantUML还能绘制哪些类型的图表？ 根据以上步骤，用户应该能够在PhpStorm中集成C4Model并生成架构图。</think>### 在PhpStorm中集成C4Model的步骤 #### 1. **安装PlantUML插件** - 打开PhpStorm，进入 `File > Settings > Plugins` - 搜索 **PlantUML Integration** 并安装 - 重启IDE激活插件 > *原理：C4Model通过PlantUML语法实现，该插件提供PlantUML渲染支持[^2]* #### 2. **配置Graphviz（必需渲染引擎）** - 下载安装Graphviz：https://graphviz.org/download/ - 在PhpStorm中配置路径： ``` Settings > Tools > PlantUML > Graphviz dot executable ``` 指向安装的 `dot.exe`（Windows）或 `/usr/bin/dot`（Mac/Linux） > *验证：创建 `.puml` 文件输入 `@startuml A -> B @enduml` 应显示箭头图* #### 3. **集成C4-PlantUML库** - 下载C4宏定义文件： ```bash git clone https://github.com/plantuml-stdlib/C4-PlantUML ``` - 将 `C4.puml`, `C4_Component.puml` 等文件放入项目目录（如 `docs/architecture`） - 在代码中引用： ```plantuml !include path/to/C4_Context.puml ``` #### 4. **创建C4架构图** - 新建 `.puml` 文件（如 `system_context.puml`） - 编写C4代码示例： ```plantuml @startuml !include C4_Context.puml Person(user, "用户", "系统使用者") System(system, "订单系统", "处理订单的核心系统") Rel(user, system, "提交订单") @enduml ``` - 右键文件选择 **Diagrams > Show Diagram** 预览 #### 5. **代码分析集成（进阶）** - 使用 **PHP Mess Detector** 或 **PHPStan** 分析代码结构 - 将分析结果手动映射到C4元素： ```plantuml !include C4_Component.puml Component(OrderService, "订单服务", "PHP", "处理订单逻辑") Component(MySQL, "数据库", "MySQL", "存储订单数据") Rel(OrderService, MySQL, "读写数据") ``` ### 效果演示 ![C4上下文图示例](https://c4model.com/img/diagram.png) *通过C4-PlantUML生成的系统上下文图（示意图）[^2]* ### 注意事项 1. **版本控制**：所有 `.puml` 文件可提交到Git，实现架构图版本化管理[^2] 2. **实时预览**：开启 `Settings > Tools > PlantUML > Auto Render` 可实时刷新图表 3. **快捷键**：`Alt+D` 快速打开/关闭图表面板 > *提示：对于复杂系统，建议分层创建：* > 1. Context层：`system_context.puml` > 2. Container层：`containers.puml` > 3. Component层：`order_service_components.puml`
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值