欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-06-26 08:40:32
前端开发vscode中比较使用的插件工具 (希望能帮助刚入门的前端开发小伙伴)Chinese (Simplified) Language Pack for Visual Studio Code中文简体语言包Auto Close Tag自动添加HTML / XML关闭标签Auto Rename Tag自动重命名配对的HTML / XML标签HTML Snippets代码自动填充HTML Boilerplate提供生成标准HTML样板代码Image Preview鼠...

前端开发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配置规则,格式化代码不规范的地方。

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

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