在 VSCode 中飞快使用 Typescript

README.md

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

keybindings.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"
	},
]

settings.json

// 将设置放入此文件中以覆盖默认设置
{
    "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
}