编程崽

登录

一叶在编程苦海沉沦的扁舟之上，我是那只激情自射的崽
其他编程相关 (34)
重命名
新建文件夹
新建文档
移动
删除

VS code配置

VS code配置

安装VS code后，首先进行的就是设置软件，安装插件等等，下面就是我自己安装的插件和设置项。

常用插件

以下插件是我这里使用的所有插件，其中Autoprefixer、Easy Sass和scss-to-css和安装完后就禁用，因为我大部分项目是需要使用webpack编译，不需要这两个插件，只有在开发静态项目，不使用自动构建工具时，才需要使用他们。

  • Chinese (Simplified) Language Pack for Visual Studio Code
  • Class autocomplete for HTML
  • Debugger for Chrome
  • ESLint
  • filesize
  • FreeMarker
  • HTML Snippets
  • HTMLHint
  • Live Server
  • Path Intellisense
  • Vetur
  • View In Browser
  • Todo Tree：在代码中写下 // TODO 其他注释说明，侧边栏的这个插件栏就会展示这个未完成的事项。
  • Search node_modules：作者为[Jason Nutter]的这个插件，可以使用快捷键「command + k, command + n」，直接从 node_modules 文件夹中搜索并打开文件，解决了当需要查看依赖源码，但从 node_modules 查找时不容易找到的痛点。
  • any-rule：内置了大量常用格式的正则，可以直接使用其网页版搜索复制正则：https://any86.github.io/any-rule/
  • Format Files 批量格式化，安装后，在资源管理器的栏目中右键，选择 Start Format Files: Workspace，就噼里啪啦开始了
  • Markdown-preview-enhanced 预览 md 文件的插件，vs自带 md 预览是黑色背景，感觉视觉不清晰，所以用了这款插件，据说可配置项还挺多，可搜索官网学习，自定义预览页面样式也很简单，官网教程有写，就是改 ~/.mume/style.less 文件。
  • Sublime Text Keymap：Sublime 快捷键映射，自己酌情判断是否需要
  • Bookmarks 书签功能，查看源码时很有用
  • GitLens — Git supercharged 显示git提交信息和一些其他项目git信息和功能
  • Vue VSCode Snippets
  • Comment Translate框选注释自动翻译(可能需要在插件选项设置一下，指定翻译为中文)
  • Bracket Pair Colorizer(选用js中的代码块的颜色标记)
  • minapp(微信小程序语法, 非必须)
  • Draw.io Integration(非必须) 这个插件可有可无，主要是让可以让 vs code 能编辑.drawio格式的流程图，有兴趣的可以查看插件官方介绍(英文) ，中文官网。
  • Partial Diff 框选两端代码进行 diff 比较，详细用法百度或看文档。
  • Rust （非必须）rust 开发需要
  • Native Debug （非必须）rust 开发需要

键盘快捷方式自己改

三个 css 编译插件的说明

当开发静态项目时，也推荐自己使用parceljs这个构建工具，真的是零配置工具，自动支持[es6/代码压缩混淆]，只需要安装一个scss依赖，其他什么也不用做，就可以支持[scss]，如果还需要css自动补全兼容语法，就需要稍微配置一下了，这里也可以使用我搭建的parceljs搭建的静态项目脚手架，如果使用了这个脚手架，那么这三个插件就不需要了。

  • Autoprefixer：自动补全css兼容语法。
  • Easy Sass：scss自动转css。
  • scss-to-css：scss自动转css的同时，也自动补全css兼容语法，但需要两个额外的配置。
    1. 手动全局安装node-sass，否则不生效。
    2. 在项目根目录，添加一个自动补全css的浏览器配置文件，名称.scssrc，内容如下：
sh 复制代码 
{ "browsers": ["ie > 9", "iOS > 8", "Android >= 4.4", "ff > 38", "Chrome > 38"] }

以上三个，同时只能使用一个，同时使用也行，但他们三个会各自为战，不能互相配合，这里推荐只使用scss-to-css，一步到位。

登录 github 同步配置

vs code 支持同步配置，只需点击左下角配置，选择打开设置同步：

Snipaste_2021-02-23_10-38-54.png

随后让选择进行同步的模块，可见几乎就是所有常用配置了：

Snipaste_2021-02-23_10-39-14.png

最后，选择同步时使用的平台，暂时只提供了以下两个：

Snipaste_2021-02-23_10-39-22.png

选择后，会自动打开浏览器，打开对应平台的网站进行授权，如果浏览器已经登录了，那直接点击授权按钮即可，否则就需要先用浏览器登录一下了。

让 vs code 识别代码中的别名@

使用 vs code 开发react、vue等项目时，自己经常会使用脚手架的别名配置，让 @ 等价于 src/，这样引入文件资源模块时，可以以绝对路径的写法引入文件资源：

js 复制代码 
// 某js中引入文件时，有了两种写法

// 写法一，原本的写法，需要使用相对路径
import Top from '../../components/Top'

// 写法二，使用别名 @ 后，可以使用绝对路径的写法
import Top from '@/components/Top'

但这样使用有两个问题，下面附上两个缺点的解决方案。

写路径时的智能提示

本来使用了 Path Intellisense 这个插件（我记得是插件的功能），再引入文件写文件路径时，输入斜杠就会自动展示这个文件夹下面的所有文件，以供用户快速选择输入。

但使用了 @ 后，这个插件不认识了，不知道这个符号代表的是哪个文件夹，无法自动展示了。

解决方法：

同样需要 Path Intellisense 这个插件(又名扩展)，插件安装好后，右键插件选择 扩展设置，设置界面中找到 Path-intellisense:Mappings 这项设置，点击下面的 在 settings.json 中编辑 按钮。

点击后，会发现跳转到的 vs code 的系统设置的 settings.json 文件中，并自动添加了此插件的配置对象，我们需要修改为以下：

json 复制代码 
{
    // ...上面是其他配置们
    "path-intellisense.mappings": {
        "@": "${workspaceRoot}/src",
    }
}

然后，再使用写法二时，就又会出现我们想要的文件夹下的展示了。

option+单击跳转到此文件

使用相对路径引入模块时，按住 option 点击模块或者路径时，会自动打开此文件。

但使用了 @ 后不行了，一样的不识别的问题。

而且，问题一是插件的功能，改插件配置能解决。

而这个跳转功能是 vs code 的功能，需要修改 vs code 才能解决。

解决方法：

这个方法需要在项目中添加一个配置文件，用于 vs code 读取，官方教程 https://code.visualstudio.com/docs/languages/jsconfig。

在项目根目录添加文件 jsconfig.json 文件，如果存在 tsconfig.json，那么在这个文件中修改也OK，因为 jsconfig.json 本就是 tsconfig.json 的子文件。

主要内容为：

json 复制代码 
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  },
}

有了上面这个文件，vs code 就可以认识一些自定义的别名符号了。

配置使用code启动vs code

在windows系统，可以在终端中使用code .指令，可以用vs cdoe快速打开当前目录下的项目，比较方便。

而Mac系统，则需要设置一下才能使用，mac的vs code中，使用快捷键Command + Shift + P打开命令面变，然后输入shell command，就会如下图所示出现命令提示，点击对应的「在PATH中安装“code”命令」这个操作就可以了。

Snipaste_2022-04-22_10-30-25.png

json 设置文件

json 复制代码 
// 将设置放入此文件中以覆盖默认设置
{
  // 以像素为单位控制字号。
  "editor.fontSize": 14,
  "editor.hover.delay": 1000, // 悬浮提示的出现的前置时间
  // 控制编辑器是否应自动设置粘贴内容的格式。格式化程序必须可用并且能设置文档中某一范围的格式。
  "editor.formatOnPaste": false,
  // 一个制表符等于的空格数。该设置在 `editor.detectIndentation` 启用时根据文件内容进行重写。
  "editor.tabSize": 2,
  // 控制折行的缩进。可以是“none”、“same”或“indent”。
  "editor.wrappingIndent": "indent",
  // 控制折行方式。可以选择： - “off” （禁用折行）， - “on” （视区折行）， - “wordWrapColumn”（在“editor.wordWrapColumn”处折行）或 - “bounded”（在视区与“editor.wordWrapColumn”两者的较小者处折行）。
  "editor.wordWrap": "off",
  // 控制是否将代码段与其他建议一起显示以及它们的排序方式。
  "editor.snippetSuggestions": "top",
  "workbench.startupEditor": "newUntitledFile",
  "editor.multiCursorModifier": "ctrlCmd",
  "gitlens.advanced.messages": {
    "suppressCommitHasNoPreviousCommitWarning": false,
    "suppressCommitNotFoundWarning": false,
    "suppressFileNotUnderSourceControlWarning": false,
    "suppressGitVersionWarning": false,
    "suppressLineUncommittedWarning": false,
    "suppressNoRepositoryWarning": false
  },
  "git.enableSmartCommit": true,
  "liveServer.settings.donotShowInfoMsg": true,
  "git.autofetch": true,
  "files.associations": {
    "*.cjson": "jsonc",
    "*.wxss": "css",
    "*.wxs": "javascript",
    "*.scpt": "applescript"
  },
  // 把前面两种格式的文件,识别为html(主要可以自动补全)
  "emmet.includeLanguages": {
    "wxml": "html",
    "ftl": "html",
    "javascript": "javascriptreact"
  },
  "minapp-vscode.disableAutoConfig": true,
  "editor.suggestSelection": "first",
  "javascript.updateImportsOnFileMove.enabled": "never",
  "editor.renderWhitespace": "none",
  "editor.renderControlCharacters": false,
  "diffEditor.ignoreTrimWhitespace": false,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "never"
  },
  "git.confirmSync": false,
  "explorer.confirmDragAndDrop": false,
  "bookmarks.saveBookmarksInProject": true,
  "debug.onTaskErrors": "debugAnyway",
  // 双击代码框选时，遇到下面这些字符，会停止框选(把原默认配置中的 - 去掉了)
  "editor.wordSeparators": "`~!@$%^&*()=+[{]}\\|;:'\",.<>/?，。？！、【】（）‘’“”：；《》￥…「」『』·",
  "workbench.editorAssociations": {
    "*.pdf": "default",
    "*.scpt": "default"
  },
  "security.workspace.trust.untrustedFiles": "open",
  "liveServer.settings.CustomBrowser": "chrome",
  "editor.unicodeHighlight.ambiguousCharacters": false,
  "[javascript]": {
    "editor.defaultFormatter": "vscode.typescript-language-features"
  },
  "[html]": {
    "editor.defaultFormatter": "vscode.html-language-features"
  },
  "[json]": {
    "editor.defaultFormatter": "vscode.json-language-features"
  },
  "terminal.integrated.defaultProfile.osx": "zsh",
  "explorer.confirmDelete": false,
  "path-intellisense.mappings": {
    "@": "${workspaceRoot}/src"
  },
"window.openFoldersInNewWindow": "on",
    "workbench.colorTheme": "Default Dark+",
    "editor.quickSuggestions": {
    "strings": true
  },
  "settingsSync.ignoredExtensions": [],
  "editor.accessibilitySupport": "off",
  "window.commandCenter": false,
  "workbench.layoutControl.enabled": false,
  "remote.forwardOnOpen": false,
  "typescript.updateImportsOnFileMove.enabled": "never",
  "explorer.confirmPasteNative": false,
  "update.showReleaseNotes": false,
  "editor.stickyScroll.enabled": false,
  "vue.server.hybridMode": "typeScriptPluginOnly",
  "books.maxWords": 65,
	"workbench.colorCustomizations": {
		"statusBar.background": "#333333", /* 状态栏背景色 */
		"statusBar.foreground": "#94b4cd", /* 状态栏前景文字颜色 */
	}
}
更新时间：2025/01/03 18:14:40
本页目录