【IDE】VSCODE编辑器配置

阅读数: 2024-06-26

前言

在前端项目，文件目录中存在.vscode文件夹，该文件夹的作用是定义项目使用的vscode编辑器的配置，为所有开发者保持相同的IDE环境（插件、配置等）。下面介绍我在vscode中的配置：

.vscode/extensions.json

项目插件推荐

{
  "recommendations": [
    "octref.vetur", // vue项目开发必需
    "dbaeumer.vscode-eslint", // eslint代码检查
    "eamodio.gitlens", // git操作界面
    "jasonnutter.search-node-modules", // ctrl+k后ctrl+n搜索node_modules中的包
    "formulahendry.auto-rename-tag", // 自动同步重命名 html tag
    "sdras.vue-vscode-snippets", // vue 代码片段
  ]
}

安装上面推荐插件需要再插件里面点击推荐并安装，在“工作区推荐”最右边有按钮可以一键安装

dbaeumer.vscode-eslint对应插件的标识符

.vscode/setting.json

项目默认配置

{
  "editor.tabSize": 2,
  "search.exclude": {
    "**/node_modules": true,
    "**/bower_components": true,
    "**/dist": true
  },
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "vue"
  ],
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  "editor.wordWrapColumn": 120
}

注意：项目中的setting.json会覆盖vscode中的全局配置（只对当前项目有效）

.vscode/launch.json

调试配置

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:9010",
      "webRoot": "${workspaceFolder}/src",
      "sourceMaps": true,
      "skipFiles": ["node_modules/**/*.js"]
    }
  ]
}

jsconfig.json

简单来说，该文件的作用就是提供给JavaScript语言服务分析并为JavaScript项目中的所有文件提供IntelliSense(智能感知)。

{
  "compilerOptions": {
    "target": "es5", // 指定 ECMAScript 版本的编译目标。es5 表示将代码编译为 ES5 标准，以确保在较旧的浏览器中运行。（实际上由于该文件是tsconfig.json的后代，tsconfig.json用于编译TypeScript）
    "module": "esnext", // 指定要使用的模块系统。esnext 表示使用最新的 ECMAScript 模块系统（包括 import 和 export）。
    "baseUrl": "./", // 设置非相对模块导入的基准目录。"./" 表示当前项目根目录。
    "moduleResolution": "node", // 指定模块解析策略。node 表示使用 Node.js 的模块解析规则，这意味着它会在 node_modules 文件夹中查找模块。
    // 使用webpack别名
    "paths": { 
      "@/*": [ "src/*" ],
      "@utils/*": [ "src/utils/*" ]
    }
   },
  // 排除下面文件夹提高IntelliSense速度（如果检测到速度减慢，VS代码将提示您执行此操作）
  // 如果工作空间中没有jsconfig.json，则默认情况下，VS Code将排除node_modules文件夹。
  "exclude": ["node_modules", "dist"],
   // 显式设置项目中的文件。如果不存在include属性，则默认为包含目录和子目录中的所有文件。
   // "include": [ "src/**/*" ]
}

PS：目前该文件放到项目的根目录下，好像也可以放到 .vscode 文件夹中，待验证

snippets

通常工作中都是使用插件提供的snippets，如Vue VSCode Snippets

创建代码片段

打开 VS Code。
进入命令面板（使用快捷键 Ctrl+Shift+P 或 Cmd+Shift+P）。
输入并选择 Preferences: Configure User Snippets。
选择适合的语言或者新建一个全局代码片段文件，例如 javascript.json。

代码片段示例

{
  "Print to console": {
    "scope": "javascript,typescript",
    "prefix": "clg",
    "body": [
      "console.log('$1');",
      "$2"
    ],
    "description": "Log output to console"
  },
  "Function Declaration": {
    "prefix": "func",
    "body": [
      "function ${1:functionName}(${2:params}) {",
      "  $0",
      "}"
    ],
    "description": "创建一个函数声明的模板"
  },
  "Arrow Function": {
    "prefix": "af",
    "body": [
      "const ${1:functionName} = (${2:params}) => {",
      "  $0",
      "};"
    ],
    "description": "创建一个箭头函数的模板"
  },
  "Import Module": {
    "prefix": "imp",
    "body": [
      "import ${1:module} from '${2:modulePath}';"
    ],
    "description": "快速生成导入模块的代码"
  },
  "Switch Statement": {
    "prefix": "switch",
    "body": [
      "switch (${1:expression}) {",
      "  case ${2:value}:",
      "    $3",
      "    break;",
      "  default:",
      "    $4",
      "    break;",
      "}"
    ],
    "description": "创建一个Switch语句模板"
  },
  "Class Declaration": {
    "prefix": "class",
    "body": [
      "class ${1:ClassName} {",
      "  constructor(${2:params}) {",
      "    $0",
      "  }",
      "",
      "  ${3:method}(${4:params}) {",
      "    $5",
      "  }",
      "}"
    ],
    "description": "创建一个Class类模板"
  },
}

scope：限定代码段的作用域，例如 go 语言的代码段不会出现在 js 中，反之亦然

prefix：是快捷关键字，当 VSCode 检测到代码中出现 prefix 关键字就会在编辑器中替换为 body 的内容

body：是重复的代码模板内容，通常是程序员想要自动化的一些重复，模板代码，录入在这里

description：顾名思义就是对这段 snippets 的具体描述

这里值得再提一下的就是， body 里面的 $1 关键字是模板代码替换后鼠标光标的所在位置，当出现多个 $1，$2 的时候，可以通过键盘 TAB 按键快速切换鼠标光标所在位置，用于提高效率，这块就不具体深入描述了，有兴趣的小伙伴可以自行去探索。

参考

https://blog.csdn.net/zqd_java/article/details/128669696

https://zhuanlan.zhihu.com/p/55644953

https://zhuanlan.zhihu.com/p/642777341

本文作者： ionluo
本文链接： http://www.ionluo.cn/blog/posts/9af42917.html
版权声明： 本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。转载请注明出处！