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

安装软件

https://code.visualstudio.com点我进入vscode官网

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

安装完毕后重启即可汉化
接着按着这个步骤，安装以下全部插件

自动同步修改前后标签:

Auto Rename Tag

更好的图标显示:

vscode-icons

智能自动补全工具:

点我进入教程

Mithril Emmet

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

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

Beautify

代码拼写检查插件

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

Code Spell Checker

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

guides

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

Rainbow Brackets

文件路径快速填写:

./即可开始补全

Path Intellisense

H5代码提示类插件:

HTML Snippets

CSS样式提示类插件:

HTML CSS Support

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

HTMLHint

主题插件

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

theme-stayfresh

背景插件

background

设置代码如下：

{
    "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
}

效果如下：