工具_Visual code常用前端开发插件配置

喜欢ヅ旅行 2023-02-24 03:44 30阅读 0赞

### 安装软件 ###

#### [https://code.visualstudio.com点我进入vscode官网][https_code.visualstudio.com_vscode] ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU5OTkzMQ_size_16_color_FFFFFF_t_70]

### 进入这个页面后，如果想要汉化，就在左上角输入Chinese，然后点击install ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU5OTkzMQ_size_16_color_FFFFFF_t_70 1]  
安装完毕后重启即可汉化  
接着按着这个步骤，安装以下全部插件

### 自动同步修改前后标签: ###

> Auto Rename Tag

![在这里插入图片描述][20200708092749292.png]

### 更好的图标显示: ###

> vscode-icons

![在这里插入图片描述][20200708092640155.png]

### 智能自动补全工具: ###

[点我进入教程][Link 1]

> Mithril Emmet

![在这里插入图片描述][20200708092955777.png]

### 美化代码，一键整齐排列当前面页面代码: ###

F1 > 输入bea，即可按下回车使用这个功能

> Beautify

![在这里插入图片描述][202007080931351.png]

### 代码拼写检查插件 ###

很多人一开始学总会把标签打错，这个插件可以检查这些拼写错误的位置并且标注出来:

> Code Spell Checker

![在这里插入图片描述][2020070809322431.png]

### 代码的对齐线，超级好用的东西呀: ###

> guides

![在这里插入图片描述][2020070809330488.png]

### 给所有括号加上颜色辨识: ###

> Rainbow Brackets

![在这里插入图片描述][20200708093353271.png]

### 文件路径快速填写: ###

./即可开始补全

> Path Intellisense

![在这里插入图片描述][20200708093431822.png]

### H5代码提示类插件: ###

> HTML Snippets

![在这里插入图片描述][20200708093508571.png]

### CSS样式提示类插件: ###

> HTML CSS Support

![在这里插入图片描述][20200708093544649.png]

### h5的代码检测，超级方便的插件: ###

> HTMLHint

![在这里插入图片描述][20200708093612764.png]

### 主题插件 ###

最后推荐一款主题插件，本人也很喜欢这款插件，真的很好看

> theme-stayfresh

![在这里插入图片描述][20200708094118850.png]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU5OTkzMQ_size_16_color_FFFFFF_t_70 2]

### 背景插件 ###

> background

![在这里插入图片描述][20200708094602249.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU5OTkzMQ_size_16_color_FFFFFF_t_70 3]  
设置代码如下：

{ 
        "background.enabled": true,
        "background.useDefault": false,
        "background.customImages": [
        
        "file:///E:图片路径"
        ],
        "background.style": { 
            "width": "100%",
            "height": "100%",
            "background-position": "center",
            "background-repeat": "no-repeat",
            "opacity": 0.1
        },
        "javascript.updateImportsOnFileMove.enabled": "always",
        "workbench.colorTheme": "stayfresh-main",
        "workbench.iconTheme": "vscode-icons",
        "editor.accessibilityPageSize": 12,
        "background.styles": [
    
            { },
            { },
            { }
        ],
        "guides.enabled": false,
        "editor.fontSize": 16
    }

效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU5OTkzMQ_size_16_color_FFFFFF_t_70 4]

[https_code.visualstudio.com_vscode]: https://code.visualstudio.com/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU5OTkzMQ_size_16_color_FFFFFF_t_70]: /images/20230209/a1189fd6ea814e93b2757e1bda54cadc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU5OTkzMQ_size_16_color_FFFFFF_t_70 1]: /images/20230209/2ad949bd7a204e80ad7476cb40ddaa08.png
[20200708092749292.png]: /images/20230209/392ba884e81a46ec8b2cdbedb6efc41a.png
[20200708092640155.png]: https://img-blog.csdnimg.cn/20200708092640155.png
[Link 1]: https://blog.nutssss.cn/785.html
[20200708092955777.png]: https://img-blog.csdnimg.cn/20200708092955777.png
[202007080931351.png]: https://img-blog.csdnimg.cn/202007080931351.png
[2020070809322431.png]: https://img-blog.csdnimg.cn/2020070809322431.png
[2020070809330488.png]: https://img-blog.csdnimg.cn/2020070809330488.png
[20200708093353271.png]: https://img-blog.csdnimg.cn/20200708093353271.png
[20200708093431822.png]: https://img-blog.csdnimg.cn/20200708093431822.png
[20200708093508571.png]: https://img-blog.csdnimg.cn/20200708093508571.png
[20200708093544649.png]: https://img-blog.csdnimg.cn/20200708093544649.png
[20200708093612764.png]: https://img-blog.csdnimg.cn/20200708093612764.png
[20200708094118850.png]: https://img-blog.csdnimg.cn/20200708094118850.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU5OTkzMQ_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200708094449826.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU5OTkzMQ==,size_16,color_FFFFFF,t_70
[20200708094602249.png]: https://img-blog.csdnimg.cn/20200708094602249.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU5OTkzMQ_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200708095112872.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU5OTkzMQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU5OTkzMQ_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200708095203195.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU5OTkzMQ==,size_16,color_FFFFFF,t_70