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

骑猪看日落 2024-04-19 11:32 62阅读 0赞

## 主题 ##

### Snazzy Operator ###

![44b0beb30e83fe54f1f1948ecb00d613.png][]

### Oceanic Next ###

![92d5103fc2c57d04b198741d635eb776.png][]

## 字体 ##

### [JetBrains Mono][] ###

*  字体效果

![b10162b4e1145d08d9685ac6ebfdeaa4.gif][]

### [SourceCodePro][] ###

## 图标 ##

### Material Icon Theme ###

![59234ecb0e2943a88377ea26165825c7.png][]

## 扩展插件 ##

### Auto Close Tag ——代码闭合 ###

![075e43fb700f26a1240de4be016c8d37.png][]

### Auto Rename Tag ——重命名匹配标签 ###

*  自动重命名配对的 HTML / XML 标签，也可以在 JSX 中使用

![d6e428b65dd8131b492659d4f3004107.png][]

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

### Better Comments—— 代码注释 ###

![9ad8792e7e802de910dd0070cd7eacbb.png][]

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

![1eb567481b1aea535769d85a4e9f07d4.png][]

### Bracket Pair Colorizer 2 ——括号颜色 ###

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

![612dc7c99c0304caae1c183dfdc71d62.png][]

### Change-case ——切换命名规则 ###

![eb96264dcbd7b4e87d0aee3c1e4d59dc.png][]

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

![ea0f9eb2f34906f683d24a7b01cb3b87.png][]

### Code Runner—— 代码运行 ###

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

![3f96b4d903074054eda29cb333cfef7f.png][]

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

### Chinese (Simplified) Language Pack ——汉化包 ###

![8523c757447f0bb63150699bbdb9a120.png][]

### CSS Peek ——快速编辑查看css ###

比较常用的快捷键

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

![40252b907528a66d3431bb27604f5d74.png][]

### Code Spell Checker ——代码检查 ###

*  检查单词拼写是否有错

![a2137bc49325c18fd8ae8bbbfe19c623.png][]

### DotENV——env 高亮 ###

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

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

![9f4397e73ceb9d2ac0446d7bf2b63151.png][]

### ESLint ——代码风格 ###

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

![f0d36b33675af3ab96846851b2ca8cba.png][]

[ESLint][]

### filesize——文件大小 ###

![c13c3954830cf70f8cbd26707f385e63.png][]

在 Vscode 左下角显示文件大小

![9ad77a5030fb2942a20764c71ba3e90b.png][]

### Image preview——图片预览 ###

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

![4b2a642aa6c9e54f5d6a64cecde17eaa.png][]

### Indent Rainbow——文本缩进颜色 ###

![421edebf8a64c9c16e96b93416afe03f.png][]

缩进效果如下：

![770b16dd075a82ccacf03961569fe96b.png][]

### Live Server——热更新 ###

![4646c18eaa5bdf9d1381b18997b5313d.png][]

### open in browser——打开默认浏览器 ###

![a2a03e1007b443545624f583db933b79.png][]

### Prettier——代码格式化 ###

![128f90e8aa946c031c3f6e752e0d208f.png][]

常用配置表如下：

{ 
        // 多少行时开始折行
        "prettier.printWidth": 140,
        // flase 不要分号
        "prettier.semi": false,
        // true 使用单引号
        "prettier.singleQuote": true,
        // 箭头函数参数只有一个时是否要有小括号。avoid：省略括号
        "prettier.arrowParens": "avoid",
        // 自动格式化
        "editor.formatOnSave": true,
    }

### Path Intellisense——自动显示文件名/路径 ###

![416f5adc4c14224ad9bc77855a1c27df.png][]

### ES7 React/Redux/GraphQL/React-Native snippets——高亮jsx ###

![9bbac98df915d7f543a333ce869da317.png][]

### Settings Sync——Vscode配置同步 ###

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

![a8fc4b6ac8688f3e10e2b1b1c2287f07.png][]

*  上传快捷键 : Shift + Alt + U
 *  下载快捷键 : Shift + Alt + D

### Vetur——Vue工具 ###

*  支持多种功能，比如语法高亮、错误检测、Emmet 和 Snippet 等等

![79d6d89a327cb3f407004a26dc155dc6.png][]

### Vue CSS Peek——Vue 查看 CSS 定义 ###

*  允许在 Vue 中跳转到 CSS 定义，补足 CSS Peek 无法定义的部分

![224c68fa7e8b2711d96db0d7031bfb09.png][]

### Vue-helper——Vue ###

*  Element、iView 代码提示和属性解读
 *  允许查看方法、组件的定义

![5e3d38f8d10495270f313177a4f6207f.png][]

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

![b3b8d8deabe36111a8ce1d2b7dbfd674.png][]

### Vue Peek——Vue 查看组件定义 ###

*  允许在 Vue 中跳转相对/绝对文件路径
 *  允许查看组件的定义

![5d2ebfc340f21579bfcb217a2cb8046a.png][]

## Emmet ##

目前所有的前端编辑器都支持 Emmet

[Emmet 作弊表][Emmet]

## settings.json ##

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

{ 
    	//终端在Windows上使用的shell的路径
      "terminal.integrated.shell.windows": "D:\\Develop\\Git\\bin\\bash.exe",
    	//控制终端的字号（以像素为单位）
      "terminal.integrated.fontSize": 12,
    
        //控制字体体系
      "editor.fontFamily": "'JetBrains Mono', Consolas, 'Courier New', monospace",
        //启用或禁用字体连字
      "editor.fontLigatures": true,
        //以像素为单位控制字号
      "editor.fontSize": 18,
        //控制行高。为0时通过字体大小自动计算
      "editor.lineHeight": 24,
        //控制以像素为单位的字母间距1
      "editor.letterSpacing": 0.5,
        //控制字体粗细
      "editor.fontWeight": "400",
        //控制光标样式，常用接受的值 "block" "line"
      "editor.cursorStyle": "line",
        //当 #editor.cursorStyle# 设置为line时，控制光标的宽度
      "editor.cursorWidth": 5,
        //控制光标的动画样式
      "editor.cursorBlinking": "solid"
         //一个制表符等于的空格数
      "editor.tabSize": 2,
    
        //指定用在工作台的颜色主题
      "workbench.colorTheme": "Snazzy Operator",
        //控制侧边栏和活动栏的位置。它们可以显示在工作台的左侧或右侧
      "workbench.sideBar.location": "right",
    }

旧版本 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/*"]
        },
        "target": "ES6",
        "module": "commonjs",
        "allowSyntheticDefaultImports": true
      },
      "include": ["src/**/*"],
      "exclude": ["node_modules", "dist"]
    }

## 快捷键 ##

[vscode 快捷键][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**：重新打开最新关闭的窗口

## VSCODE 问题 ##

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

## 扩展工具其他篇——Jypyter ##

[工具篇-vscode 效率提升插件][-vscode]

[你真的会用 Jupyter 吗？这里有 7 个进阶功能助你效率翻倍][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

[44b0beb30e83fe54f1f1948ecb00d613.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/20195317e4f4491cbb69184266e66286.png
[92d5103fc2c57d04b198741d635eb776.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/214eca4450674b7794c098744f88aadb.png
[JetBrains Mono]: https://www.jetbrains.com/lp/mono/
[b10162b4e1145d08d9685ac6ebfdeaa4.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/08f5be16d3144c9491d7f5d0ef3876f4.gif
[SourceCodePro]: https://github.com/adobe-fonts/source-code-pro
[59234ecb0e2943a88377ea26165825c7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/d4470b417e6a48068905947134e78f19.png
[075e43fb700f26a1240de4be016c8d37.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/291d5290d5a349a0b52df0a938082ad3.png
[d6e428b65dd8131b492659d4f3004107.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/33024ec7ce524afc9332daa5aa1d6435.png
[9ad8792e7e802de910dd0070cd7eacbb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/c705b4ff60124c3892cbf99ea334c73f.png
[1eb567481b1aea535769d85a4e9f07d4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/f998cb16382f4220bb9b3080fcaa4999.png
[612dc7c99c0304caae1c183dfdc71d62.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/0e276cf4f52942f59db2c8d9011c955a.png
[eb96264dcbd7b4e87d0aee3c1e4d59dc.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/3276b0db637b44a698367836eb815148.png
[ea0f9eb2f34906f683d24a7b01cb3b87.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/5bb6de8f9b86452786f42ff376e4ff8a.png
[3f96b4d903074054eda29cb333cfef7f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/9e6b110d113e493eb0cc179d3dd44d75.png
[8523c757447f0bb63150699bbdb9a120.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/db142c46fe034728a2ed9df9cc7d97d9.png
[40252b907528a66d3431bb27604f5d74.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/b7f200e5db66484ea88733cb117dfe81.png
[a2137bc49325c18fd8ae8bbbfe19c623.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/426ed8b04b36471693218f733f7bba4d.png
[9f4397e73ceb9d2ac0446d7bf2b63151.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/e40ebfb6845640e0a438f4283ea29c11.png
[f0d36b33675af3ab96846851b2ca8cba.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/7b8599b189a04161a4b66f816a443c0b.png
[ESLint]: https://docs.shanyuhai.top/tools/vscode/format-with-eslint.html
[c13c3954830cf70f8cbd26707f385e63.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/092c881cfd2744d4af41bce33d059e1d.png
[9ad77a5030fb2942a20764c71ba3e90b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/58702f2091a24cce9021e7e359f79a83.png
[4b2a642aa6c9e54f5d6a64cecde17eaa.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/55ed8c6dacdf4cad8af4dd6517768737.png
[421edebf8a64c9c16e96b93416afe03f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/5483b031ab104733b1fa37d80a171eb2.png
[770b16dd075a82ccacf03961569fe96b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/879af8e13670443dafaa0b9997fd67a4.png
[4646c18eaa5bdf9d1381b18997b5313d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/5f8b3818f8434bd9bee63d198dd11401.png
[a2a03e1007b443545624f583db933b79.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/26bc443342dd4c118a9e7465eab7b185.png
[128f90e8aa946c031c3f6e752e0d208f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/043a08d8e2a74827890a6515c6916dff.png
[416f5adc4c14224ad9bc77855a1c27df.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/7a7e6880571249a6878036709f5cdd70.png
[9bbac98df915d7f543a333ce869da317.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/028b3770c69c4537af639f2f6cc977c3.png
[a8fc4b6ac8688f3e10e2b1b1c2287f07.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/28b55d69e61f414588fa57742eea451f.png
[79d6d89a327cb3f407004a26dc155dc6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/c25f79862180413b931e651c0001407a.png
[224c68fa7e8b2711d96db0d7031bfb09.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/2306c4241e524a79a425395e4b6e3cf9.png
[5e3d38f8d10495270f313177a4f6207f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/941e38c86a6d4241a508de8191e6b30a.png
[b3b8d8deabe36111a8ce1d2b7dbfd674.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/026cc9d5bea24f2990fb378949cb0bc9.png
[5d2ebfc340f21579bfcb217a2cb8046a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/33c019b9b00c4bfcb41d735e2ff36242.png
[Emmet]: https://docs.emmet.io/cheat-sheet/
[vscode]: https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf
[cmd]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/d6db7ac1a32544c59ddd9ebe11597912.png
[-vscode]: https://zhuanlan.zhihu.com/p/73452541
[Jupyter _ 7]: http://news.eeworld.com.cn/mp/QbitAI/a58625.jspx