目录

VS Code 前端开发常用插件及配置

# HTML/CSS

  1. HTML CSS Support——在HTML文件中提示CSS

  2. Easy LESS——将LESS自动编译为CSS

    "less.compile": {
      "compress": false, // 是否压缩
      "sourceMap": false, // 是否开启SourceMap,用于查看源文件行数
      "out": "${workspaceRoot}\\css\\", // 输出路径
      "outExt": ".css" // 输出文件的后缀
    }
    
    1
    2
    3
    4
    5
    6
  3. Easy Sass——将SCSS自动编译为CSS

    "easysass.formats": [
      {
        "format": "compressed", // 压缩
        "extension": ".min.css"
      },
      {
        "format": "expanded", // 未压缩
        "extension": ".css"
      }
    ],
    "easysass.targetDir": "", // 输出路径
    "easysass.compileAfterSave": true
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12

# JS/TS/Vue

  1. Code Runner——直接运行 .js .ts 结尾的文件(需安装node与ts-node)

    "code-runner.runInTerminal": true,
    "code-runner.saveFileBeforeRun": true,
    
    1
    2

    ts-node安装:npm install -g ts-node

  2. JavaScript (ES6) code snippets——智能提醒ES6语法

  3. Volar——Vue3 语法提示

# 通用工具

  1. open in browser——在浏览器打开页面

  2. Live Server——启动一个本地服务器,页面可以自动刷新

  3. Project Manager——管理多个项目

  4. CodeSnap——生成代码截图

  5. Path Intellisense——路径提示

    "path-intellisense.mappings": {
        "@": "${workspaceRoot}/src"
    },
    
    1
    2
    3
  6. Prettier——格式化代码

    "prettier.printWidth": 150, // 超过最大值换行
    "prettier.tabWidth": 2, // tab 2格
    "prettier.semi": true, // 句尾添加分号
    "prettier.arrowParens": "always", // 添加括号
    "prettier.trailingComma": "none", // 在对象或数组最后一个元素后面是否加逗号(在ES5中加尾逗号)
    "prettier.singleQuote": true, // 使用单引号代替双引号
    
    1
    2
    3
    4
    5
    6

# 过时插件

  1. Auto Close Tag——自动添加闭合标签(VS Code 已内置该功能)

    // 在typescript中不启用auto-close-tag
    "auto-close-tag.disableOnLanguage": [
        "typescript"
    ],
    
    1
    2
    3
    4
  2. Auto Rename Tag——标签改名时,自动添加(VS Code 已内置该功能)

    "editor.linkedEditing": true
    
    1
  3. HTML Snippets——HTML代码片段(VS Code 已内置该功能)

  4. Settings Sync——同步插件(VS Code 已内置该功能)

  5. Bracket Pair Colorizer 2——彩虹括号(VS Code 已内置该功能)

    "editor.bracketPairColorization.enabled": true
    
    1
  6. Vetur ——Vue2插件,已过时

    "vetur.validation.template": false, // 关闭EsLint
    "vetur.experimental.templateInterpolationService": true, // 在template上开启代码提示
    
    1
    2
  7. Beautify——代码格式化,已过时