Vscode中css样式书写提示的插件及使用方法

逃离我推掉我的手 2023-01-23 13:59 35阅读 0赞

**1、找到两个插件**  
HTML to CSS autocompletion，外联样式提示插件  
css-class-intellisense，内联样式提示插件  
找到，点击右下角的安装进行安装

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTkzMjE1Nw_size_16_color_FFFFFF_t_70]  
**2、安装完以后进行配置**

点击右下角设置，点击命令面板，【或者快捷键 ctrl + shift + p】

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTkzMjE1Nw_size_16_color_FFFFFF_t_70 1]  
2.2、搜索settings.json配置文件  
搜索框中输入settings.json  
点击：首选项：打开设置（json）

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTkzMjE1Nw_size_16_color_FFFFFF_t_70 2]  
2.3、输入配置代码  
如图：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTkzMjE1Nw_size_16_color_FFFFFF_t_70 3]  
输入的代码：

"editor.parameterHints": true,
        "editor.quickSuggestions": { 
            "other": true,
            "comments": true,
            "strings": true
        }

最后，重启vscode，即可完美提示运行。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTkzMjE1Nw_size_16_color_FFFFFF_t_70]: /images/20221004/538fcb00e19f49c5829d03fac4e7f0b8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTkzMjE1Nw_size_16_color_FFFFFF_t_70 1]: /images/20221004/37753f2d3f304e2c954547c30210ebcd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTkzMjE1Nw_size_16_color_FFFFFF_t_70 2]: /images/20221004/9eb147bf12a247ccb407b2cdd3cff8f0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTkzMjE1Nw_size_16_color_FFFFFF_t_70 3]: /images/20221004/6c935ef8a7ab481cb2f24e06912eb78c.png