VScode 前端常用配置/设置/问题

主题

Snazzy Operator

我最常用使用的主题就是这个

"editor.tokenColorCustomizations": {
  "comments": "#5abb77"
}

但是这个主题的注释颜色不是很项目，推荐修改 settings.json 修改注释颜色

Oceanic Next

字体

JetBrains Mono

下载地址：JetBrains Mono

再推荐一个字体：SourceCodePro

• 字体效果

//控制字体体系
"editor.fontFamily": "'JetBrains Mono', Consolas, 'Courier New', monospace",

图标

Material Icon Theme

我最长使用的图标就是这个

图标样式支持很广泛，对前端非常友好

扩展插件

× Auto Close Tag

自动让 HTML 标签闭合（现在我已经不用了）

× Auto Rename Tag

• 自动重命名配对的 HTML / XML 标签，也可以在 JSX 中使用（现在我已经不用了）

"auto-rename-tag.activationOnLanguage": ["html", "xml", "php", "javascript"]

Bookmarks

打书签，看源码的时候常用

快捷键我总忘，忘的时候右击看一下，ctrl + alt + k

Better Comments

高亮代码注释（现在我用的地方很少了）

/* MyMethod
  * 绿色的高亮注释
  ! 红色的高亮注释
  ? 蓝色的高亮注释
  todo 橙色的高亮注释
  // 灰色带删除线的注释
*/

× Bracket Pair Colorizer 2

现在已经并入到 VSCode 中，无需额外下载

• 此扩展名允许用颜色标识匹配的括号

Change-case

Ctrl + Shift + P 执行命令的输入框，选择 Change Case Commands，选择其规范格式即可

• 我常用它转换驼峰、转换为常量

Code Runner

• 代码一键运行，万能语言运行环境

Java 和 python 运行的时候最好设置一下

"code-runner.executorMap": {
	"python": "set PYTHONIOENCODING=utf8 && python",
	"java": "cd $dir && javac -encoding utf-8 $fileName && java $fileNameWithoutExt",
},
"code-runner.runInTerminal": true,

Color Highlight

高亮显示颜色，很有用

Chinese (Simplified) Language Pack

汉化包

键入 ctrl + shift + p，输入 language，点击 Confifure Display Language 进行语言切换

× CSS Peek

快速编辑查看 css（现在我已经不用了）

比较常用的快捷键

• Go to：直接跳转到 CSS 文件或在新的编辑器（F12）中打开
• Hover：在符号上悬停显示定义（Ctrl + hover）

Code Spell Checker

• 检查单词拼写是否有错

DotENV——env 高亮

env 可能大致分为如下几种情况

• .env.development 开发环境
• .env.production 生产环境
• .env.stage 预发布环境 .env.grayscale 灰度测试环境
• .env.sit 系统集成测试环境 .env.test 测试环境

CodeSnap

代码截图插件，生成一个很好看的代码片段，分享代码常用

ESLint

• 语法规则和代码风格的检查工具

ESLint

filesize

在 Vscode 左下角显示文件大小（现在我用的地方很少了）

GitLens — Git supercharged

很多好用的 git 功能都集成在这个插件里

Image preview

• 悬停时显示图像预览或装订线左侧可以预览大小图片

Indenticator

强调缩进深度

Indent Rainbow

文本缩进颜色

缩进效果如下：

× koroFileHeader

函数注释，封装通用方法时常用（现在我已经不用了）

详细配置可参考：vscode添加新建文件头部注释和函数注释

Live Server

热更新

open in browser

打开默认浏览器

Prettier

我最常使用的代码格式化插件

常用配置可以参考下面分配置文件 .prettierrc.js

Path Intellisense

自动显示文件名/路径

ES7 React/Redux/GraphQL/React-Native snippets

高亮 jsx

× Settings Sync

现在已经并入到 VSCode 中，无需额外下载

Vscode 配置同步。使用 GitHub Gist 在多台机器上同步设置，代码片段，主题，文件图标，启动，键绑定，工作区和扩展

• 上传快捷键 : Shift + Alt + U

• 下载快捷键 : Shift + Alt + D

Marp for VS Code

使用 Markdown 写 PPT

vscode-element-helper

Element 代码片段

× Vetur

• 支持多种功能，比如语法高亮、错误检测、Emmet 和 Snippet 等等（现在我已经不用了，只用）

Vue Language Features (Volar)

现在基本上只用这个了

Vue VSCode Snippets

vue 代码片段

Vue 3 Snippets

Vue3 代码片段

× Vue CSS Peek

• 允许在 Vue 中跳转到 CSS 定义，补足 CSS Peek 无法定义的部分（现在我已经不用了）

× Vue-helper

• Element、iView 代码提示和属性解读（现在我已经不用了）
• 允许查看方法、组件的定义

注意： 下载的不是下面那个，下面那个是语法提示、简化的插件

× Vue Peek

• 允许在 Vue 中跳转相对/绝对文件路径（现在我已经不用了）
• 允许查看组件的定义

其余插件推荐

连接 SSH

开发微信小程序

展示配置文件

国际化

快捷键

vscode 快捷键

• Ctrl + P ：转到文件，您可以在 Visual Studio Code 中移动到打开的文件/文件夹的任何文件。
• Ctrl + ` ：在 VS Code 中打开 terminal
• Alt + Down：下移一行
• Alt + Up：上移一行
• Ctrl + D：将选定的字符移动到下一个匹配字符串上
• Ctrl + Space：触发建议
• Shift + Alt + Down：向下复制行
• Shift + Alt + Up：向上复制行
• Ctrl + Shift + T：重新打开最新关闭的窗口

目前所有的前端编辑器都支持 Emmet：Emmet 作弊表

配置文件

settings.json

在 VS Code 中，按 Ctrl + P，输入 settings.json 并打开该文件

{
	/* 终端配置 */
  "terminal.integrated.profiles.windows": {
    "Git-Bash": {
      "path": "D:\\Git\\bin\\bash.exe",
      "args": []
    }
  },
  "terminal.integrated.defaultProfile.windows": "Git-Bash",
  "terminal.integrated.fontSize": 15,
  "code-runner.runInTerminal": true,

	/* 编辑器配置 */
  "editor.fontSize": 16,
  "editor.lineHeight": 20,
  "editor.letterSpacing": 0.5,
  "editor.fontWeight": "400",
  "editor.fontFamily": "'JetBrains Mono', Consolas, 'Courier New', monospace",
  "editor.fontLigatures": true, // 连体字
  "editor.tabSize": 2,
  "editor.cursorStyle": "line",
  "editor.cursorWidth": 5,
  "editor.cursorBlinking": "solid", // 光标动画样式
  "editor.suggestSelection": "first",
  "editor.wordWrap": "on", // 视区自动折行
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.detectIndentation": false, // 打开文件时不自动检查tabSize
  "editor.tokenColorCustomizations": {
    "comments": "#5abb77" // 注释颜色
  },

  /* 工作区配置 */
  "workbench.iconTheme": "material-icon-theme",
  "workbench.colorTheme": "Snazzy Operator",
  "workbench.editor.splitInGroupLayout": "vertical",
  "workbench.sideBar.location": "right",
  "explorer.compactFolders": false, // 紧凑显示名称
}

旧版本 VSCode 需要这样配置 "terminal.integrated.shell.windows": "D:\\Develop\\Git\\bin\\bash.exe", 新版本需要写入如下配置：

{
  "terminal.integrated.automationShell.windows": "D:\\Develop\\Git\\bin\\bash.exe",
  "terminal.integrated.profiles.windows": {
    "PowerShell": {
      "source": "PowerShell",
      "icon": "terminal-powershell"
    },
    "Command Prompt": {
      "path": ["${env:windir}\\Sysnative\\cmd.exe", "${env:windir}\\System32\\cmd.exe"],
      "args": [],
      "icon": "terminal-cmd"
    },
    "Bash": {
      "path": ["D:\\Develop\\Git\\bin\\bash.exe"],
      "icon": "terminal-bash"
    }
  }
}

jsconfig.json

绝对路径、相对路径跳转需要在根目录增加 jsconfig.json 文件

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

.prettierrc.js

module.exports = {
  // 一行最多 120 字符
  printWidth: 120,
  // 使用 2 个空格缩进
  tabWidth: 2,
  // 不使用缩进符，而使用空格
  useTabs: false,
  // 行尾不需要有分号
  semi: false,
  // 使用单引号
  singleQuote: true,
  // jsx 不使用单引号，而使用双引号
  jsxSingleQuote: true,
  // jsx 标签的反尖括号需要换行
  bracketSameLine: false,
  // 末尾不需要有逗号
  trailingComma: 'none',
  // 大括号内的首尾需要空格
  bracketSpacing: true,
  // 对象的 key 仅在必要时用引号
  quoteProps: 'as-needed',
  // 箭头函数，只有一个参数的时候，不需要括号
  arrowParens: 'avoid',
  // 所有元素间的空格都会被忽略，直接另起一行
  htmlWhitespaceSensitivity: 'ignore',
  // vue 文件中的 script 和 style 内不用缩进
  vueIndentScriptAndStyle: false,
  // 换行符使用 lf
  endOfLine: 'lf',
  // 格式化模板字符串里的内容
  embeddedLanguageFormatting: 'auto',
  // html, vue, jsx 中每个属性占一行
  singleAttributePerLine: false,
  // 使用默认的折行标准
  proseWrap: 'preserve'
}

VSCode 问题

旧版本一些失效问题

1. vscode 保存文件时自动删除行尾空格：搜索 files.trimTrailingWhitespace ，然后将选项勾选即可
2. VSCode 中调用 cv2，代码一直显示红色波浪线（pylint 只支持自己的标准库）：搜索 Pylint Args 点击 add item 添加 --generate-members 即可
3. 代码补全失效：搜索 auto Complete 添加第三方库的路径
4. 如果打开终端的时候弹出了系统的 cmd 窗口。解决方法：打开系统 cmd，然后左上角右键属性，取消使用旧版控制台
   

卡顿问题

最近使用 Vscode 总是特别卡顿，网上大部分的解决方案如下（但是没有什么效果）

• search.followSymlinksd: false （控制是否在搜索中跟踪符号链接）
• git.enabled: false （是否启用Git）
• git.autorefresh: false （是否启用自动刷新）

语言设置问题

都设置后还是很卡，很是头疼。去查看一下资源管理器，看一下哪个占用较多的cpu资源，发现是一个 Microsoft.Python.LanguageServer 的进程占用

勾选 Jedi 不使用 Microsoft

• Python: Language Server: jedi

// 最好在 settings.json 中加上这个，要不然可能随时变回 Microsoft
"python.languageServer": "Jedi",

同样， cpptools.exe 的进程占用也很高

• C_Cpp: Intelli Sense Engine: disabled

插件问题

都设置后，还是会时不时卡顿，再去查看资源管理器，发现有一些插件也会导致 CPU 过高

• Auto Rename Tag （其实按F2重构即可）

你可以在命令面板（Ctrl + Shift + P）输入 Developer: Startup Performance 查看各个插件启动时间

可以参考 [那些你应该考虑卸载的 VSCode 扩展](

其他篇工具篇

Jypyter

工具篇-vscode 效率提升插件

你真的会用 Jupyter 吗？这里有 7 个进阶功能助你效率翻倍

如果出错：以管理员方式运行

# 更新pip到最新版本
$ pip install --upgrade pip
# 如果没有pip
$ python -m ensurepip
$ easy_install pip
# 安装Jupyter
$ pip install jupyter
# 安装nbextensions
$ python -m pip install jupyter_contrib_nbextensions
$ jupyter contrib nbextension install --user --skip-running-check
或
$ conda install -c conda-forge jupyter_nbextensions_configurator
# 安装完成后，勾选 “Table of Contents” 以及 “Hinterland”
# 启动
$ jupyter notebook

HedgeDoc

两种方式启动，我一般会使用第二种方式

1. 镜像方式启动

   $ docker pull quay.io/hedgedoc/hedgedoc
   $ docker-compose down
   $ docker-compose up -d
   

2. 下载文件方式启动

   $ git clone https://github.com/hedgedoc/container.git hedgedoc-container
   $ cd hedgedoc-container
   $ docker-compose down
   $ docker-compose up -d