Skip to content

Instantly share code, notes, and snippets.

@riskers riskers/README.md
Last active Jul 25, 2019

Embed
What would you like to do?
在 VSCode 中飞快使用 Typescript (极度舒适)

VSCode 中写 TS 使用的快捷键

我已经习惯使用 IDEA 写 Java,所以在 VSCode 里写 Typescript 也想要 rename 、go to defined 这些功能。这些功能在最开始写 JavaScript 的时候还真的没用过,每次都是全局搜索,很 low ~

基本参考这篇文章 https://johnpapa.net/refactoring-with-visual-studio-code/ 然后按照自己的习惯改改快捷键就行了。

常用功能有(快捷键是我自己设置的):

  • format: cmd + shift + l

  • go to definition: F3

  • peek definition: cmd + F3

  • find all references: cmd + shift + g

  • trigger suggest: ctrl + 1

  • rename: shift + f6 (move-ts when sideBarFocus)

  • rename: shift + f6 (rename when editorTextFocus)

rename 功能我不是很喜欢,VSCode 自带的 rename 会把使用这个模块的所有文件都打开而且不自动保存,后来找到 Move TS 这个插件解决。

keybindings.json 是提供我的关于 TS 这些功能的快捷键,懒的话可以直接复制使用

VSCode 中用 TS 写 React / Vue 的配置

参考 https://github.com/AlloyTeam/eslint-config-alloy#%E5%9C%A8-vscode-%E4%B8%AD%E4%BD%BF%E7%94%A8

其他设置

因为我不喜欢不可控的感觉,所以我把 VSCode 的 auto format 都关掉了。

为了避免和 ESLint 冲突,我还把 VSCode 自带的 validate 关掉了:

具体可见下面 settings.json

// 将键绑定放入此文件中以覆盖默认值
[
{
"key": "shift+cmd+l",
"command": "-editor.action.selectHighlights",
"when": "editorFocus"
},
{
"key": "shift+cmd+l",
"command": "-editor.action.insertCursorAtEndOfEachLineSelected",
"when": "editorTextFocus"
},
{
"key": "shift+cmd+l",
"command": "editor.action.formatDocument",
"when": "editorHasDocumentFormattingProvider && editorHasDocumentFormattingProvider && editorTextFocus && !editorReadonly"
},
{
"key": "shift+alt+f",
"command": "-editor.action.formatDocument",
"when": "editorHasDocumentFormattingProvider && editorHasDocumentFormattingProvider && editorTextFocus && !editorReadonly"
},
{
"key": "f3",
"command": "-workbench.action.terminal.findNextTerminalFocus",
"when": "terminalFocus"
},
{
"key": "f3",
"command": "-editor.action.nextMatchFindAction",
"when": "editorFocus"
},
{
"key": "f3",
"command": "-workbench.action.terminal.findNext",
"when": "terminalFindWidgetFocused"
},
{
"key": "f3",
"command": "editor.action.revealDefinition",
"when": "editorHasDefinitionProvider && editorTextFocus && !isInEmbeddedEditor"
},
{
"key": "cmd+f3",
"command": "editor.action.peekDefinition",
"when": "editorHasDefinitionProvider && editorTextFocus && !inReferenceSearchEditor && !isInEmbeddedEditor"
},
{
"key": "alt+f12",
"command": "-editor.action.peekDefinition",
"when": "editorHasDefinitionProvider && editorTextFocus && !inReferenceSearchEditor && !isInEmbeddedEditor"
},
{
"key": "shift+cmd+g",
"command": "-workbench.action.terminal.findPrevious",
"when": "terminalFindWidgetFocused"
},
{
"key": "shift+cmd+g",
"command": "-workbench.action.terminal.findPreviousTerminalFocus",
"when": "terminalFocus"
},
{
"key": "shift+cmd+g",
"command": "-editor.action.previousMatchFindAction",
"when": "editorFocus"
},
{
"key": "shift+cmd+g",
"command": "references-view.find",
"when": "editorHasReferenceProvider"
},
{
"key": "shift+alt+f12",
"command": "-references-view.find",
"when": "editorHasReferenceProvider"
},
{
"key": "shift+f6",
"command": "editor.action.rename",
"when": "editorHasRenameProvider && editorTextFocus && !editorReadonly"
},
{
"key": "shift+f6",
"command": "move-ts.move",
"when": "sideBarFocus"
},
{
"key": "f2",
"command": "-editor.action.rename",
"when": "editorHasRenameProvider && editorTextFocus && !editorReadonly"
},
{
"key": "shift+alt+o",
"command": "-editor.action.organizeImports",
"when": "editorTextFocus && !editorReadonly && supportedCodeAction =~ /(\\s|^)source\\.organizeImports\\b/"
},
{
"key": "ctrl+alt+o",
"command": "-typescriptHero.imports.organize",
"when": "editorTextFocus"
},
{
"key": "shift+cmd+o",
"command": "typescriptHero.imports.organize"
},
{
"key": "shift+f6",
"command": "move-ts.move"
},
{
"key": "ctrl+1",
"command": "workbench.action.openTipsAndTricksUrl"
},
{
"key": "ctrl+1",
"command": "editor.action.triggerSuggest",
"when": "editorHasCompletionItemProvider && textInputFocus && !editorReadonly"
},
]
// 将设置放入此文件中以覆盖默认设置
{
"javascript.validate.enable": false,
"javascript.updateImportsOnFileMove.enabled": "always",
"javascript.suggestionActions.enabled": false,
"typescript.updateImportsOnFileMove.enabled": "always",
"typescriptHero.imports.organizeSortsByFirstSpecifier": true,
"typescriptHero.imports.disableImportRemovalOnOrganize": true,
"[javascript]": {
"editor.formatOnSave": false,
"editor.defaultFormatter": "esbenp.prettier-vscode",
},
"[typescript]": {
"editor.formatOnSave": false,
"editor.defaultFormatter": "esbenp.prettier-vscode",
},
"[javascriptreact]": {
"editor.formatOnSave": false,
"editor.defaultFormatter": "esbenp.prettier-vscode",
},
"[typescriptreact]": {
"editor.formatOnSave": false,
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"eslint.enable": true,
"eslint.autoFixOnSave": false,
"eslint.validate": [
"javascript",
"javascriptreact",
"vue",
"typescript",
"typescriptreact"
],
"javascript.format.insertSpaceAfterCommaDelimiter": false,
"javascript.format.enable": false,
"typescript.validate.enable": false,
"typescript.tsc.autoDetect": "off",
"typescriptHero.imports.disableImportsSorting": true,
"eslint.alwaysShowStatus": true,
"diffEditor.renderSideBySide": false,
"prettier.eslintIntegration": true
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.