nolebase
Search K

Appearance

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

HTML/CSS ​

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

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

    json
    "less.compile": {
  "compress": false, // 是否压缩
  "sourceMap": false, // 是否开启 SourceMap，用于查看源文件行数
  "out": "${workspaceRoot}\\css\\", // 输出路径
  "outExt": ".css" // 输出文件的后缀
}

  3. Easy Sass——将 SCSS 自动编译为 CSS

    json
    "easysass.formats": [
  {
    "format": "compressed", // 压缩
    "extension": ".min.css"
  },
  {
    "format": "expanded", // 未压缩
    "extension": ".css"
  }
],
"easysass.targetDir": "", // 输出路径
"easysass.compileAfterSave": true

JS/TS/Vue ​

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

    json
    "code-runner.runInTerminal": true,
"code-runner.saveFileBeforeRun": true,

    ts-node 安装：

    bash
    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——路径提示

    json
    "path-intellisense.mappings": {
    "@": "${workspaceRoot}/src"
},

  6. Prettier——格式化代码

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

过时插件 ​

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

    json
    // 在 typescript 中不启用 auto-close-tag
"auto-close-tag.disableOnLanguage": [
    "typescript"
],

  2. Auto Rename Tag——标签改名时，自动添加（VS Code 已内置该功能）

    json
    "editor.linkedEditing": true

  3. HTML Snippets——HTML 代码片段（VS Code 已内置该功能）

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

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

    json
    "editor.bracketPairColorization.enabled": true

  6. Vetur ——Vue2 插件，已过时

    json
    "vetur.validation.template": false, // 关闭 EsLint
"vetur.experimental.templateInterpolationService": true, // 在 template 上开启代码提示

  7. Beautify——代码格式化，已过时