vscode 笔记

通过在命令行输入 code . 使 vscode 打开文件夹

win

配置环境变量
- C:\Users\Administrator\AppData\Local\Programs\Microsoft VS Code\bin
- 重启终端，在终端执行code .使用vscode打开当前目录
用gitbash配置别名
- echo 'alias cc="code ."' >> vim ~/.bashrc
- echo 'alias web="webstorm64"' >> vim ~/.bashrc
- source ~/.bashrc使别名立即生效
- 输入cc使用vscode打开当前文件夹，相当于code .

终端切换

左下角设置——>功能——>终端——>External:Windows Exec
配置好之后，打开终端，点击选择默认shell，选中后重新打开终端

cmdC:\Windows\System32\cmd.exe
gitbashD:\Git\bin\bash.exe

调试

VSCode Debug功能按钮从左到右功能依次为：

按钮1：运行/继续 F5，直接跳转到下一断点；
按钮2：单步跳过(又叫逐过程) F10，按语句单步执行。当有函数时，不会进入函数；
按钮3：单步调试（又叫逐语句） F11：当有函数时，点击这个按钮，会进入这个函数内；
按钮4：单步跳出 ⇧F11:如果有循环，点击该按钮，会执行到循环外面的语句；
按钮5：重启 ⇧⌘F5；
按钮6：停止 ⇧F5

VSCode launch.json常用变量

${workspaceRoot}：VS Code当前打开的文件夹
${file} ：当前打开的文件
${relativeFile}：相对于workspaceRoot的相对路径
${fileBasenameNoExtension}：当前文件的文件名，不带后缀，也即launch
${fileBasename}：当前打开文件的文件名
${fileDirname}：所在的文件夹，是绝对路径
${fileDirname}：文件所在的文件夹路径
${lineNumber}：当前文件光标所在的行号
${fileExtname}：当前打开文件的拓展名，如.json
${cwd}：启动时任务运行程序的当前工作目录
${workspaceFolder}：表示当前workspace文件夹路径
${workspaceRootFolderName}：表示workspace的文件夹名
${env:PATH}：系统中的环境变量

VSCode调试配置项说明

request：请求配置类型，可以为launch（启动）或attach（附加）

下面是launch 和 attach 类型共有的属性

protocol：设置调试协议
auto： 尝试自动检测目标运行时使用的协议
inspector 新的V8调试器协议，解决遗留版本的多数问题，node versions >= 6.3 and Electron versions >= 1.7.4
legacy： 原始的v8调试器协议，node versions < v8.0 and Electron versions < 1.7.4.
port：调试使用的端口
address ：TCP/IP地址，用于远程调试
localRoot： 远程调试时映射的本地地址
remoteRoot： 远程调试时的远程目录地址
sourceMaps： 默认为true
outFiles ：当map文件不在js文件同目录时用于指定 sourceMaps的位置
restart ：自动重启调试
timeout： 配置自动附加的超时时间
stopOnEntry： 自动断点到第一行代码处
smartStep： 自动跳过未映射到源代码的代码
skipFiles :[]String,指定跳过单步调试的代码
trace ： 启用诊断输出

以下是特定于类型 launch(启动)的配置属性

program： 指定调试入口文件地址
args ： []String 传递给程序的参数,可在process.argv拿到
cwd ：指定程序启动调试的目录 ,当vscode启动目录不是项目根目录，并且调试npm script时非常有用
runtimeExecutable： 设置运行时可执行文件路径，默认是node
可以是其他的执行程序，如npm、nodemon
runtimeArgs： 传递给运行时可执行文件的参数,例如：
runtimeVersion： 设置运行时可执行程序的版本，如果使用nvm，可以切换node.js版本
env： 添加额外的环境变量
envFile： 文件加载环境变量
console： 配置终端可以是外部终端或者内部集成终端，默认值internalConsole
autoAttachChildProcesses： 跟踪调试对象的所有子过程，并自动附加到在调试模式下启动的子过程

调试内容来源

vscode魔改

cursor 免费14天
trae.ai 国际版
trae.cn 国内版

扩展

Settings Sync
通过 GistID 同步配置和扩展，便于多设备同步。
.gitignore Generator
自动生成 .gitignore 文件。
Auto Rename Tag
修改 HTML/JSX 标签时自动同步闭合标签。
Babel JavaScript
支持 ES201x、React JSX、Flow、GraphQL 的语法高亮。
Bash Debug
Bash 脚本调试器，基于 bashdb。
Better Comments
优化注释显示，提升代码可读性。
Bracket Pair Colorizer
括号配对高亮显示，便于阅读嵌套结构。
Chinese (Simplified)
简体中文语言包。
Code Runner
支持多语言代码片段快速运行。
Community Material Theme
多款美观主题，提升界面体验。
Darcula Theme - WebStorm Edition
WebStorm 风格暗色主题。
Debugger for Chrome
Chrome 浏览器调试支持。
Docker
容器开发、管理与调试支持。
EJS language support
EJS 模板语法高亮，建议将 *.ejs 关联为 html。
Auto Import
自动导入 JS/TS 模块，需注意误导入。
ESLint
集成 ESLint 代码规范检查。
GitLens
Git 能力增强，代码历史、作者信息一目了然。
HTML CSS Support
HTML/CSS 智能提示与补全。
Ignore files
支持多种忽略文件（如 .gitignore、.npmignore 等）。
Import Cost
显示 import/require 包的体积。
JavaScript (ES6) code snippets
常用 ES6 代码片段提示。
JavaScript Booster
JS/TS 代码快速修复与重构工具。
json2ts
JSON 转 TypeScript 接口工具。
LeetCode
在 VSCode 内刷 LeetCode 题目。
licenser
快速生成许可证文件或注释。
Live Server
本地实时预览服务器。
Live Share
实时协作开发与共享。
Material Icon Theme
丰富的文件/文件夹图标主题。
Material Theme
多款 Material 风格主题。
Move TS
移动 TS 文件并自动更新导入路径。
Node.js Exec
直接用 Node.js 执行当前文件或选中代码。
Node.js Modules Intellisense
Node 模块导入智能补全。
npm Intellisense
npm 包导入智能补全。
Output Colorizer
日志输出着色。
Path Intellisense
路径智能补全。
Live Sass Compiler
自动编译 SCSS/Sass 为 CSS。
Prettier - Code formatter
代码格式化工具，支持多语言。
Remote - SSH
远程开发支持，通过 SSH 连接服务器。
SCSS Everywhere / Formatter / IntelliSense
SCSS 相关支持：补全、格式化、智能提示。
shell-format
Shell 脚本格式化。
Swig(.tpl)
Swig 模板语法高亮与片段。
TypeScript Hero
TypeScript 导入管理与重构。
Vue Peek / VueHelper
Vue 文件跳转、模板生成等辅助。
YAML
YAML 语法支持。
picgo
图床上传，支持 Markdown 粘贴图片自动上传。
Browser Preview
内置浏览器预览调试。
ClipImage64
剪贴板图片粘贴为本地文件或 base64。
AI 助手
- Roo Code
- Github Copilot
- CodeBuddy（腾讯云）
- Lingma（通义灵码）

Settings Sync 上传和拉取【已弃用】

vscode 可以快速完成配置，自动安装相关扩展

搜索扩展并安装Settings Sync
拉取公共配置文件和扩展
- 安装好后会自动弹出 Setting Sync（或者 ctrl+shift+p 输入sync，找到sync:advanced options，然后点击—>再点击打开设置）
- 第一次使用未配置过
- 点击LOGIN WITH GITHUB下面的Download Public Gist，粘贴你的 gist fc1481c83fb01baf1b818b817bec4e7a，回车即可
- 如果已配置（或修改gist）
- 在Environment Settings下面的Gist ID处修改ID，然后ctrl+shift+p 输入 sync，点击sync:download setting
上传配置文件和扩展
- 生成token
  - 点击EDIT CONFIGURATION，然后去生成 github token
  - 登录 github 并打开 https://github.com/settings/tokens
  - 点击 Generate new token
  - 输入账号密码
  - 输入 Note
  - 选择[*] gist Create gists
  - 点击Generate token
- 配置
  - 安装好后会自动弹出 Setting Sync（或者 ctrl+shift+p 输入 sync，找到sync:advanced options，然后点击—>再点击打开设置）
  - 第一次使用未配置过需要点击EDIT CONFIGURATION
  - 如果你的 github 账号上传过，可以把老的Gist ID粘贴在Environment Settings处
  - 将生成成功的token粘贴至Global Settings的获取令牌，失焦自动保存
  - 如果没有自动上传生成Gist ID，手动shift+alt+u上传下
  - Environment Settings下面的选项全部勾了，当前设备会自动强制更新同步为Gist ID的最新配置扩展
配置和使用
- 命令面板(ctrl+shift+p)—>输入 sync 即可查看相关设置
- 上传配置shift+alt+u

ESlint 使用

vscode-eslint

搜索安装或打开vscode-eslint点击安装

配置保存自动修复

// 下面的设置为包括ESLint在内的所有提供程序打开“自动修复”：
"editor.codeActionsOnSave": {
    "source.fixAll": true
}
// 相反，此配置仅在ESLint上将其打开：
"editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
}
// 您还可以通过以下方式有选择地禁用ESLint：
"editor.codeActionsOnSave": { // 除过 eslint 的项目都修复
    "source.fixAll": true,
    "source.fixAll.eslint": false
}

项目安装npm安装eslint
初始化配置文件npm install eslint --save-dev && npx eslint --init
打开进行配置：eslint官网doc
配置完之后通过此命令校验js文件：npx eslint src/**/*.js

配置参考如下：.eslintrc

// 展示样式的规则 https://eslint.org/docs/rules/#stylistic-issues
{
  "env": {
      // 指定环境、指定全局、指定解析器选项、文档 https://eslint.org/docs/user-guide/configuring/language-options#specifying-environments
      "browser": false, // 浏览器全局变量不需要支持
      // var process: NodeJS.Process 'process' is not defined.
      // var process: NodeJS.Process 'process' is not defined.
      "node": true, // Node.js全局变量和Node.js作用域。
      // 添加所有ECMAScript 2021全局变量并将ecmaVersion解析器选项自动设置为12。
      // es6 的解析器为 6
      "es2021": true
  },
  "extends": "eslint:recommended",
  "parserOptions": {
      "ecmaVersion": 12,
      // 报错：Parsing error: 'import' and 'export' may appear only with 'sourceType: module'eslint
      "sourceType": "module"
  },
  "rules": {
    "semi": ["error", "never"], // 结尾是否需要分号，never不要，always要 https://eslint.org/docs/rules/semi#require-or-disallow-semicolons-instead-of-asi-semi
    "quotes": ["error", "double",{ "allowTemplateLiterals": true }], // double 双引号 single 单引号 allowTemplateLiterals 支持es6`` https://eslint.org/docs/rules/quotes
    "no-multi-spaces": "error", // 禁止多个空格 https://eslint.org/docs/rules/no-multi-spaces#disallow-multiple-spaces-no-multi-spaces
    // 以下打开搜索名称即可 https://eslint.org/docs/rules/#stylistic-issues
    "block-spacing": "error",
    "comma-spacing": ["error", { "before": false, "after": true }],
    "space-unary-ops": "error",
    "space-before-blocks": ["error", { "functions": "never", "keywords": "never", "classes": "never" }],
    "space-before-function-paren": ["error", "never"],
    "space-in-parens": ["error", "always", { "exceptions": ["[]"] }],
    "no-multiple-empty-lines": ["error", { "max":1, "maxBOF": 0}],
    "lines-around-comment": ["error", { "beforeBlockComment": true, "allowClassStart": true }],
    "indent": ["error", 2],
    "arrow-body-style":  ["error", "as-needed"],
    "arrow-spacing": ["error", { "before": false, "after": false }],
    "arrow-parens": ["error", "always"],
    "no-confusing-arrow": "error",
    "yield-star-spacing": ["error", "after"],
    "rest-spread-spacing": ["error", "never"]
  }
}
// 可以参考这里的配置 https://www.cnblogs.com/520future/p/11038793.html

ESlint+Prettier

1、VScode搜索并安装这两个插件：ESlint Prettier

安装完成之后，按下ctrl+shit+p，输入setting.json，选择首选项：打开设置（json）回车

在设置中插入如下配置

// eslint配置项，保存时自动修复
"editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
},
// 默认使用prettier格式化支持的文件
"editor.defaultFormatter": "esbenp.prettier-vscode",
// 自动设定eslint工作区
"eslint.workingDirectories": [
    { "mode": "auto" }
],

2、为你的项目安装以下插件

yarn add eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin prettier eslint-config-prettier eslint-plugin-prettier --dev
or
npm install eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin prettier eslint-config-prettier eslint-plugin-prettier --save-dev

3、新建eslint配置文件

在项目根目录下新建.eslintrc.js文件

写入如下内容

module.exports = {
  parser: "@typescript-eslint/parser", // 指定ESLint解析器
  parserOptions: {
    sourceType: "module", // 允许使用导入
  },
  extends: [
    "plugin:@typescript-eslint/recommended", // 使用@ typescript-eslint / eslint-plugin中的推荐规则
    "prettier/@typescript-eslint", // 使用eslint-config-prettier禁用一些与Prettier冲突的ESLint规则
    "plugin:prettier/recommended" // 启用eslint-plugin-prettier和eslint-config-prettier，使编辑器显示错误提示，确保这项是扩展数组中的最后一个配置
  ],
  rules: {
    // 放置ESLint规则的位置。可用于覆盖从扩展配置中指定的规则
    // 例如 "@typescript-eslint/explicit-function-return-type": "off",
  },
};

4、配置Prettier

这步是可选的，如果pretter的默认配置你觉得用着蛋疼，那么你可以在项目根目录下新建.prettierrc修改它的配置，下面列举一些常用设置，全部为默认选项，请按需修改

{
  "printWidth": 80, //限制每行字符个数
  "tabWidth": 2, //指定每个缩进级别的空格数
  "useTabs": false, //使用制表符而不是空格缩进
  "semi": true, //在语句末尾打印分号
  "singleQuote": false, //使用单引号而不是双引号
  "trailingComma": "es5", //多行时尽可能打印尾随逗号
  "bracketSpacing": true, //在对象文字中的括号之间打印空格
  "arrowParens": "always", //始终给箭头函数的参数加括号
  "htmlWhitespaceSensitivity": "css", //指定HTML文件的全局空格敏感度
  "endOfLine": "lf" //检测换行符类型，如果出现大量换行符报错，可以修改为auto不检测
}

更多配置可参考Pretter文档

5、其它

如果还想配置vue、react文件相关的格式化，可以参考下面的说明https://github.com/prettier/eslint-config-prettier
抄的这里的，版本升级比较快，这里可以做下参考，一般只需要配置eslint就可以了，两个一起配置会冲突，解决比较麻烦。 Using ESLint and Prettier in a TypeScript Project

.gitignore Generator

VSCode 使用 .gitignore Generator 生成 .gitignore 文件

搜索安装.gitignore Generator
ctrl+shift+p
输入：Generate .gitignore File
选择确定 or 选择创建确定 or 选择更新确定

GitLens

GitLens可以帮助您更好地理解代码。快速查看更改行或代码块的对象，原因和时间。回顾历史，以进一步了解代码的演变方式和原因。毫不费力地探索代码库的历史和演进。

搜索安装即可或点开安装GitLens

Import Cost

计算 imports/requires 的大小显示在包后面

安装 Import Cost
目前支持：
- 默认导入：import Func from 'utils';
- 整个内容导入：import * as Utils from 'utils';
- 选择性导入：import {Func} from 'utils';
- 选择性导入别名：import {orig as alias} from 'utils';
- 子模块导入：import Func from 'utils/Func';
- 要求：const Func = require('utils').Func;
- 同时支持Javascript和Typescript

Live Sass Compiler

VSCode 配置自动编译 Sass

安装扩展：Live Sass Compiler
监听 .scss 文件自动编译为 css 文件，非常方便

Node modules resolve

VSCode对配置别名（alias）的支持
代码中使用 @ (如：import {util} from '@/utils/index')，鼠标放在 util 上面按 ctrl ，点击后会定位到 utils/index

搜索安装 Node modules resolve

配置 jsconfig.json，vscode doc 官网关于 jsconfig.json 说明

{
    "compilerOptions": {
        "target": "es2017",
        "allowSyntheticDefaultImports": false,
        "baseUrl": "./",
        "paths": {
            "@/*": ["src/*"]
        }
    },
    "exclude": ["node_modules", "dist"]
}

Search node_modules

VS Code的简单插件，可让您快速浏览项目node_modules目录中的文件。
可能是您node_modules从VS Code的内置搜索中排除了该文件夹，这意味着如果您想在其中打开和/或编辑文件node_modules，则必须手动找到它，当node_modules文件夹很大时，这可能会很烦人。

搜索安装Search node_modules
ctrl+shift+p—>选择 search node_modules—>输入包命（文件夹名称）—>选择要打开的文件或文件夹
ctrl+n试试—>输入包命（文件夹名称）—>选择要打开的文件或文件夹

Turbo Console Log

对 console.log 插入，注释，删除

搜索安装Turbo Console Log
插入有意义的日志消息
- 选择作为调试主题的变量
- 按Ctrl + Alt + L
- 多光标支持
注释当前文档中所有由扩展名插入的日志消息
- 要注释当前文档中扩展名插入的所有日志消息，只需按alt + shift + c
取消注释当前文档中扩展名插入的所有日志消息
- 取消注释当前文档中由扩展名插入的所有日志消息的全部操作是按alt + shift + u
从当前文档中删除所有由扩展名插入的日志消息
- 要从当前文档中删除所有由扩展名插入的日志消息，只需按alt + shift + d

vueHelper

输入 vue 快速生成模板结构

在vscode应用商店输入 oysun.vuehelper，点击安装(install)
打开 vue.json 方法1
- 文件->首选项->用户片段->输入 vue或vue.json(第一次打开显示 vue,后面打开就会是 vue.json(vue),不理解意思忽略)->回车

打开 vue.json 方法2

alt+f->p->s->s->enter->输入 vue或vue.json ->enter

{
  "Print to console": {
		"prefix": "vue",
		"body": [
			"<template>",
            "  <div>$0</div>",
            "</template>",
            "",
            "<script>",
            "export default {",
            "",
            "}",
            "",
            "</script>",
            "<style>",
            "</style>"
		],
		"description": "Log output to console"
	}
}

picgo

VSCode 上传图片到图床
支持：从剪贴板上传图像、从资源管理器上传图像、从输入框上传图像

搜索安装/或打开链接点击安装 picgo
首选项—>设置—>扩展—>找到 picgo 进行配置，具体参考文档
- 可参考 picgo 官网配置文档
- 可参考《jsdelivr 各种加速，非常强大》有 picgo+github 的配置说明
- 可参考《vscode配置picgo实现图床自动上传》

Browser Preview 预览

通过扩展安装后，当前机器上还必须有chrome浏览器才能正常预览调试使用

docker的服务器是Debian，参考Debian安装chrome
- 下载安装包：wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
- 开始安装：sudo apt install ./google-chrome-stable_current_amd64.deb
- 安装完成后刷新vscode即可使用