Intellij Indea快速基于Eslint的代码的格式化的配置

谁借莪１个温暖的怀抱￠ 2023-07-14 05:24 12阅读 0赞

### Intellij Indea快速基于Eslint的代码的格式化的配置 ###

*  公众号
 *  前言
 *  配置文件
 *  配置快捷键

# 公众号 #

![在这里插入图片描述][20191218155125364.jpg]  
大家可以直接微信扫描上面的二维码关注我的公众号，大家可以在我的公众号中获取到java、数据库、分布式、前端等各类技术的文章和视频教程，欢迎大家扫描以上的二维码关注我的微信公众号。

# 前言 #

在我们的前端开发的时候，我们需要使用Eslint作为我们编写的代码的校验，这是为了保证大家的代码的编写风格的一致，以及防止一些无用的代码的产生，因此建议大家在开发我们的前端工程的时候都把eslint给加上，但是加上eslint以后，我们发现格式化代码不用使用我们的ctrl+alt+L这个快捷键，因为这个快捷键出来的不是我们所需要的格式化代码，那怎么办呢，接下来就教大家如何实现格式化代码。

# 配置文件 #

File=>Settings=>Language & Frameworks => JavaScript =>Code Quality Tools => ESLint =>Manual Eslint configuration 选择 .eslintrc 文件如下所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70]  
.eslintrc.js这个文件就在你当前工程的底下在你创建工程的时候设置了eslint的时候就有了，然后我们点击确定就可以完成了我们的eslint格式化的配置。

# 配置快捷键 #

File=>Settings=>Keymap=》搜索框搜索eslint如下所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70 1]  
接着鼠标右键点击Fix ESlint Problems=>Add Keyboard Shortcut=>设置快捷键  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70 2]  
ok到此我们就完成了我们eslint的设置了，这时候我们可以在我们的前端工程使用该快捷键，我们就可以快速的实现基于eslint的代码的格式化了。

[20191218155125364.jpg]: /images/20230529/b3de164217db4e54bc1946ec288a2bd3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70]: /images/20230529/196617b1aaee4bdcb0305af8005c374f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70 1]: /images/20230529/760d2e3ca64d4d69a57e8ba3a3c6f877.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70 2]: /images/20230529/ac0b241856874705868633ef56fb183a.png