前端开发vscode中比较使用的插件工具分享

前端开发vscode中比较使用的插件工具

  （希望能帮助刚入门的前端开发小伙伴）

1. Chinese (Simplified) Language Pack for Visual Studio Code
   中文简体语言包
2. Auto Close Tag
   自动添加HTML / XML关闭标签
3. Auto Rename Tag
   自动重命名配对的HTML / XML标签
4. HTML Snippets
   代码自动填充
5. HTML Boilerplate
   提供生成标准HTML样板代码
6. Image Preview
   鼠标移到路径里显示图像预览
7. intelliSense for CSS class names in HTML
   项目中 css 文件里的名称智能提示在 html 中
8. JavaScript (ES6) code snippets
   es6代码提示器
9. Live Server
   生成本地服务，localhost服务，浏览器实时刷新
10. Path Intellisense
    路径自动补全
11. AutoFileName
    自动提示文件路劲选择
12. Vetur Vue
    语法高亮显示, 语法错误检查, 代码自动补全
13. open in browser
    浏览器中打开html
14. Markdown Preview Enhanced
    实时预览markdown，markdown使用者必备
15. Color Picker
    css中颜色选择器
16. Easy Sass（强烈推荐使用，编写样式，避免样式类名嵌套的麻烦）
    编写.scss文件样式自动生成.css，代码中引入.css即可
    vscode设置settings.json添加这段脚本，编写.scss保存后职生成.css文件，没有其他的多余文件。

     "easysass.formats": [
            {
                "format": "expanded",
                "extension": ".css"
            }
        ],``
    注：也可以用less和stylus编写样式，安装详情的转译器即可
    

17. GitLens — Git supercharged
    会在左侧工具栏生成一个git工具图标，可以查看代码提交记录。(该谁背锅的证据记录清晰可见）
18. koroFileHeader
    用于生成文件头部注释和函数参数说明
19. any-rule
    实现一系列的正则表达式，如手机号码和身份证，再也不用为匹配正则表达式而苦恼了。
20. ESLint
    校验代码格式，建议刚入门的前端不要装

  "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
    "eslint.autoFixOnSave": true,
    "editor.formatOnPaste": false,
    "git.enableSmartCommit": true,
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        {
            "language": "vue",
            "autoFix": true
        },
        {
            "language": "react",
            "autoFix": true
        },
    ],

vscode设置settings.json添加这段脚本，会根据eslint配置规则，格式化代码不规范的地方。

21. background-cover
    用于给VScode编译器设置漂亮的背景图，初次安装右下角会提示编译器被损坏，直接勾上不再提醒即可，右下角工具栏小人图标可以调节背景图清晰度。

本文地址：https://blog.csdn.net/qq_33286909/article/details/107140251