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

Mac

  • 打开 VS code
  • 打开命令面板( ⇧⌘P
  • 输入 shell command
  • 找到: Install 'code' command in PATH
  • 点击一下就 OK 了。

win

  • 默认有 code-insiders . 新增 code .
  • Code-insiders.exe 复制一份重命名 Code.exe
  • 或者用gitbash配置别名:vim ~/.bashrc——>alias code="code-insiders"

终端切换

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

  • cmdC:\Windows\System32\cmd.exe
  • gitbashD:\Git\git-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 类型共有的属性
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    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(启动)的配置属性
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    program: 指定调试入口文件地址
    args : []String 传递给程序的参数,可在process.argv拿到
    cwd :指定程序启动调试的目录 ,当vscode启动目录不是项目根目录,并且调试npm script时非常有用
    runtimeExecutable: 设置运行时可执行文件路径,默认是node
    可以是其他的执行程序,如npm、nodemon
    runtimeArgs: 传递给运行时可执行文件的参数,例如:
    runtimeVersion: 设置运行时可执行程序的版本,如果使用nvm,可以切换node.js版本
    env: 添加额外的环境变量
    envFile: 文件加载环境变量
    console: 配置终端可以是外部终端或者内部集成终端,默认值internalConsole
    autoAttachChildProcesses: 跟踪调试对象的所有子过程,并自动附加到在调试模式下启动的子过程
    调试内容来源

扩展

  • Settings Sync 只需要通过GistID:fc1481c83fb01baf1b818b817bec4e7a就可以同步更新已有的配置和扩展
  • .gitignore Generator 自动生成.gitignore文件
  • Auto Rename Tag 修改双标签如:div,会自动同步修改对应的闭合标签(开始标签、结尾标签)
  • Babel JavaScript ES201x,React JSX,Flow和GraphQL的JavaScript语法突出显示。
  • Bash Debug 一个基于超赞bashdb脚本的bash调试器GUI前端(bashdb现在包含在软件包中)。
  • Better Comments 更好的注释扩展,将帮助您在代码中创建更人性化的注释。
  • Bracket Pair Colorizer 给括号上色的,如:((())),闭合括号会有相同颜色,相邻括号颜色会有明显区分
  • Chinese (Simplified) 简体中文扩展
  • Code Runner 代码运行器,代码片段运行器。在单独JS文件上右键run codeCtrl+Alt+NF1->点击run code
  • Community Material Theme 主题,ctrl+shift+p—>color theme—>输入Community按上下选择主题
  • Darcula Theme - WebStorm Edition 主题,ctrl+shift+p—>color theme—>输入WebStorm选择主题
  • Dart Dart Code通过支持 Dart编程语言扩展了VS Code,并提供了有效编辑,重构,运行和重新加载Flutter 移动应用程序和AngularDart Web应用程序的工具。
  • Debugger for Chrome Chrome调试
  • Docker Docker扩展使从Visual Studio Code轻松构建,管理和部署容器化应用程序变得容易。它还提供了在容器内对Node.js,Python和.NET Core的一键式调试。
  • EJS language support EJS语言支持。注意:如果看不到任何样式,请将“ * .ejs”的文件关联设置为html
  • Auto Importimport自动导入(注意检查代码,有时候自动导入了乱七八糟的东西导致报错,需要手动删除)
  • ESLintESLint集成到VS Code中。
  • Flutter 此VS Code扩展增加了对有效编辑,重构,运行和重新加载Flutter 移动应用程序的支持,以及对Dart编程语言的支持。
  • Flutter Helpers Flutter代码提示
  • Flutter Widget Snippets Flutter代码片段
  • Formatting Toggle 可以通过单击来打开和关闭格式化程序(漂亮,漂亮,…)。
  • GitLens — Git supercharged 内置到Visual Studio代码Git的能力。它可以帮助您通过Git责任注释和代码镜头一目了然地看到代码作者的身份,无缝地导航和浏览Git存储库,通过强大的比较命令获得有价值的见解,等等。
  • Gradle Language Support 字面意思,Gradle语言支持
  • HTML CSS Support 字面意思,html css语言支持(支持==提示)
  • Ignore files .gitignore引用gitignore和忽略文件,还支持:.npmignore.dockerignore.coffeelintignore.slugignore.atomignore.hgignore.vscodeignore.eslintignore.prettierignore.stylelintignore
  • Import Cost 计算importsrequires的包大小
  • IntelliSense for CSS class names in HTML 标签的class里面自动提示classname
  • JavaScript (ES6) code snippets ES6代码提示
  • JavaScript Booster 当在JavaScript(或TypeScript/Flow)中编辑代码时,此VS Code扩展提供了各种代码操作(快速修复)。只需注意左侧的灯泡,然后按一下它即可了解如何在光标下转换代码。
  • json2ts 可将JSON转换为TypeScript接口。您可以从VS Code中浏览和安装扩展。Ctrl+P通过键入来按并缩小列表命令的范围ext install json2ts
  • LeetCode vscode支持LeetCode做题、搜题
  • licenser 快速创建许可文件,或插入许可注释,支持多语言
  • Live Server 字面意思,实时服务器
  • Live Share 实时分享,Microsoft Visual Studio实时共享
  • Markdown All in One MarkdownVisual Studio Code的支持,Markdown所需的全部功能(键盘快捷键,目录,自动预览等)。
  • Material Icon Theme 文件图标、文件夹图标、自定义文件夹颜色、文件夹主题、自定义图标的不透明度、自定义图标饱和度、自定义图标关联、文件关联、自定义SVG图标、文件夹关联、自定义SVG文件夹图标、语言协会
  • Material Theme vscode主题
  • Move TS - Move TypeScript files and update relative imports 移动包含TypeScriptTypeScript文件和文件夹,并更新其相对导入路径。
  • neuron Visual Studio Code的神经元,面向数据科学家的交互式编程体验
  • Node.js Exec 使用node.js执行当前文件或您选择的代码。
  • Node.js Modules Intellisense Visual Studio Code插件,可以自动完成导入语句中的JavaScript / TypeScript模块。
  • npm Intellisense Visual Studio Code插件,可自动完成导入语句中的npm模块。
  • Output Colorizer VSCode日志输出着色器
  • Path Intellisense 路径智能感知
  • Live Sass Compiler vscode自动编译scss文件为css文件
  • Prettier - Code formatter 更漂亮-代码格式化程序
  • Remote - SSH Visual Studio代码远程-SSH
  • Remote - SSH: Editing Configuration Files Visual Studio Code远程-SSH:编辑配置文件
  • SCSS Everywhere HTMLSvelteLatteSlimLiquidTSX/JSXHamlElixirSmartyPHPERBJavascriptCSSSCSS'.class''#id'完成。只需在模板或CSS/SCSS中声明类,然后在任何地方都可以看到它。(两个方向)
  • SCSS Formatter SCSS格式化程序
  • SCSS IntelliSense SCSS智能感知
  • shell-format shell格式化
  • Swig(.tpl) Swig的简单语法着色和漂亮的代码片段。现在支持.tpl扩展名。
  • TypeScript Hero TypeScript Hero是一个vscode扩展,使您的生活更轻松。在编写大量代码时,TypeScript您可能需要vscode来组织导入。
  • TSLint eslitJS/ES的,TSLint则是相对于TS
  • Turbo Console Log 通过自动执行写有意义的日志消息的操作,此扩展使调试变得更加容易。
  • TypeScript Importer 在工作空间文件中自动搜索TypeScript定义,并提供所有已知符号作为完成项以允许代码完成。
  • TypeScript Toolbox 优化/自动导入,生成吸气剂/设置器和构造函数
  • Veturvue友好支持,代码提示,高亮,格式化,整理/错误检查,智能感知,调试等。
  • Visual Studio IntelliCodePythonTypeScript/JavaScriptJava开发AI辅助开发功能在Visual Studio Code,基于理解你的代码的上下文与机器学习相结合的见解。
  • Vue Peek 支持Vue快捷编辑,很方便
  • Vue.js Extension Pack Vue.js扩展包,该扩展包为Vue.js开发添加了功能。
  • Vue VSCode Snippets Vue代码提示
  • VueHelper 支持Vue快捷编辑,很方便
  • YAML 红帽的YAML语言支持
  • picgo 图床,支持markdown粘贴图片自动上传并生成链接

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点击安装
  • 配置保存自动修复
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    // 下面的设置为包括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
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    // 展示样式的规则 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)回车
  • 在设置中插入如下配置
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    // 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文件
  • 写入如下内容
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    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修改它的配置,下面列举一些常用设置,全部为默认选项,请按需修改
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    {
    "printWidth": 80, //限制每行字符个数
    "tabWidth": 2, //指定每个缩进级别的空格数
    "useTabs": false, //使用制表符而不是空格缩进
    "semi": true, //在语句末尾打印分号
    "singleQuote": false, //使用单引号而不是双引号
    "trailingComma": "es5", //多行时尽可能打印尾随逗号
    "bracketSpacing": true, //在对象文字中的括号之间打印空格
    "arrowParens": "always", //始终给箭头函数的参数加括号
    "htmlWhitespaceSensitivity": "css", //指定HTML文件的全局空格敏感度
    "endOfLine": "lf" //检测换行符类型,如果出现大量换行符报错,可以修改为auto不检测
    }
  • 更多配置可参考Pretter文档

5、其它

.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;
    • 同时支持JavascriptTypescript

Live Sass Compiler

VSCode 配置自动编译 Sass

Node modules resolve

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

  • 搜索安装 Node modules resolve
  • 配置 jsconfig.jsonvscode doc 官网关于 jsconfig.json 说明
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    {
    "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
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      {
      "Print to console": {
      "prefix": "vue",
      "body": [
      "<template>",
      " <div>$0</div>",
      "</template>",
      "",
      "<script>",
      "export default {",
      "",
      "}",
      "",
      "</script>",
      "<style>",
      "</style>"
      ],
      "description": "Log output to console"
      }
      }

picgo

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

快捷方式
| 操作系统 | 从剪贴板上传图像 | 从资源管理器上传图像 | 从输入框上传图像 |
| — | — | — | — |
| Windows / Unix | Ctrl + Alt + U | Ctrl + Alt + E | Ctrl + Alt + O |
| 操作系统 | Cmd + Opt + U | Cmd + Opt + E | Cmd + Opt + O |

在线编译 vscode

  • 克隆代码git clone git@github.com:microsoft/vscode.git
  • 环境要求参考:https://github.com/microsoft/vscode/wiki/How-to-Contribute
    • Git
    • Node.JS, x64, version >= 10.x, <= 14.x
    • Yarn, follow the installation guide
    • Python(node-gyp必需;请查看node-gyp自述文件以了解当前支持的Python版本)
      • 注意:将通过安装windows-build-toolsnpm模块为Windows用户自动安装Python (请参见下文)
    • 适用于您平台的AC / C ++编译器工具链
  • 安装依赖yarn install
    • 报错*** Invalid C/C++ Compiler Toolchain. Please check https://github.com/microsoft/vscode/wiki/How-to-Contribute.