编程崽

登录

一叶在编程苦海沉沦的扁舟之上,我是那只激情自射的崽

VS code配置

VS code配置

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

常用插件

以下插件是我这里使用的所有插件,其中AutoprefixerEasy Sassscss-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"
  },
  //提供文件名正则表达式,匹配到的文件会被排除,不会编译为css,默认为空,则功能关闭
  "easysass.formats": [
    {
      "format": "expanded",
      "extension": ".css"
    }
    // {
    //     "format": "compressed",
    //     "extension": ".min.css"
    // }
  ],
  "minapp-vscode.disableAutoConfig": true,
  "editor.suggestSelection": "first",
  "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
  "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,
  // Scss2css的配置
  "Scss2css.autoPrefixer": true,
  "Scss2css.output": ".css",
  "hediet.vscode-drawio.local-storage": "eyIuZHJhd2lvLWNvbmZpZyI6IntcImxhbmd1YWdlXCI6XCJcIixcImN1c3RvbUZvbnRzXCI6W10sXCJsaWJyYXJpZXNcIjpcImdlbmVyYWw7Zmxvd2NoYXJ0XCIsXCJjdXN0b21MaWJyYXJpZXNcIjpbXCJMLnNjcmF0Y2hwYWRcIl0sXCJwbHVnaW5zXCI6W10sXCJyZWNlbnRDb2xvcnNcIjpbXCJGMEYwRjBcIixcIkYwRjBGZlwiLFwiMmEyYTJhXCIsXCJDQ0NDQ0NcIixcIjJBMkEyQVwiLFwiMzMzMzMzXCIsXCJGRkZGRkZcIixcIjBGMEYwRlwiLFwibm9uZVwiXSxcImZvcm1hdFdpZHRoXCI6MjQwLFwiY3JlYXRlVGFyZ2V0XCI6ZmFsc2UsXCJwYWdlRm9ybWF0XCI6e1wieFwiOjAsXCJ5XCI6MCxcIndpZHRoXCI6ODI3LFwiaGVpZ2h0XCI6MTE2OX0sXCJzZWFyY2hcIjp0cnVlLFwic2hvd1N0YXJ0U2NyZWVuXCI6dHJ1ZSxcImdyaWRDb2xvclwiOlwiI2QwZDBkMFwiLFwiZGFya0dyaWRDb2xvclwiOlwiIzZlNmU2ZVwiLFwiYXV0b3NhdmVcIjp0cnVlLFwicmVzaXplSW1hZ2VzXCI6bnVsbCxcIm9wZW5Db3VudGVyXCI6MCxcInZlcnNpb25cIjoxOCxcInVuaXRcIjoxLFwiaXNSdWxlck9uXCI6ZmFsc2UsXCJ1aVwiOlwiXCJ9In0=",
  "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"
  },
  "[css]": {
    "editor.defaultFormatter": "MikeBovenlander.formate"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "vscode.json-language-features"
  },
  "terminal.integrated.defaultProfile.osx": "zsh",
  "explorer.confirmDelete": false,
  "path-intellisense.mappings": {
    "@": "${workspaceRoot}/src"
  },
"window.openFoldersInNewWindow": "on",
    "volar.inlayHints.eventArgumentInInlineHandlers": false,
    "workbench.colorTheme": "Default Dark+",
    "editor.quickSuggestions": {
    "strings": true
  },
  "[less]": {
    "editor.defaultFormatter": "MikeBovenlander.formate"
  },
  "prettier.semi": false,
  "settingsSync.ignoredExtensions": [],
  "editor.accessibilitySupport": "off",
  "window.commandCenter": false,
  "workbench.layoutControl.enabled": false,
  "hediet.vscode-drawio.resizeImages": null,
  "remote.forwardOnOpen": false,
  "typescript.updateImportsOnFileMove.enabled": "never",
  "explorer.confirmPasteNative": false,
  "fittencode.inlineCompletion.enable": true,
  "update.showReleaseNotes": false,
  "editor.stickyScroll.enabled": false
}