我的 VS Code 相应配置

最新推荐文章于 2023-11-25 17:56:19 发布

moozixiao

最新推荐文章于 2023-11-25 17:56:19 发布

阅读量322

点赞数

分类专栏： visual studio code 文章标签： visual studio code

本文链接：https://blog.csdn.net/moozixiao/article/details/106140933

版权

visual studio code 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

VS Code 下载

地址

插件安装

在这里插入图片描述
react 代码提示插件

React 代码块

// 安装完成该插件 ES7 React/Redux/GraphQL/React-Native snippets
// 编入 rcc + 回车 生成有状态的组件代码块 
import React, { Component } from 'react'

export default class Welcome extends Component {
  render() {
    return (
      <div>
        
      </div>
    )
  }
}

// rfc+tab键就可以生成无状态的组件代码块
// 编入 rfc + 回车 生成无状态的组件代码块
import React from 'react'

export default function Welcome() {
  return (
    <div>
      
    </div>
  )
}

配置用户代码片段

html.json

{
	"Print to desc": {
		"prefix": "desc",
		"body": [
			"<meta name=\"description\" content=\"\" />"
		],
		"description": "Log output to 网站描述"
	},
	"Print to keyw": {
		"prefix": "keyw",
		"body": [
			"<meta name=\"Keywords\" content=\"\" />"
		],
		"description": "Log output to 网站关键词"
	},
	"Print to viewp": {
		"prefix": "viewp",
		"body": [
			"<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no\">"
		],
		"description": "Log output to viewp"
	},
	"Print to ht": {
		"prefix": "ht",
		"body": [
			"<!DOCTYPE html>",
			"<html lang=\"en\">",
			"<head>",
			"\t<meta charset=\"UTF-8\">",
			"\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no\">",
			"\t<meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
			"\t<title>首页$1</title>",
			"</head>",
			"<body>",
			"\t$2",
			"</body>",
			"<script src=\".\"></script>",
			"<script>",
			"\t$3",
			"</script>",
			"</html>"
		],
		"description": "Log output to h5基本架构"
	},
	"html-vue": {
		"scope": "html",
		"prefix": "hvue",
		"body": "<!DOCTYPE html>\n<html lang=\"en\">\n<head> \n\t<meta charset=\"UTF-8\"> \n\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"> \n\t<meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">\n\t<title>$TM_FILENAME_BASE</title>\n\t<style>\n\t\t\n\t</style> \n</head> \n<body>\n\t<div id=\"app\">\n\t</div>\n\t<script src=\"https://cdn.jsdelivr.net/npm/vue/dist/vue.js\"></script>\n\t<script>\n\t\t$0\n\t</script> \n</body>\n</html>"
	},
	"html-router": {
		"scope": "html",
		"prefix": "hrouter",
		"body": "<!DOCTYPE html>\n<html lang=\"en\">\n<head> \n\t<meta charset=\"UTF-8\"> \n\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"> \n\t<meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">\n\t<title>$TM_FILENAME_BASE</title>\n\t<style>\n\t\t\n\t</style> \n</head> \n<body>\n\t<div id=\"app\">\n\t\t<router-view></router-view>\n\t</div>\n\t<script src=\"https://cdn.jsdelivr.net/npm/vue/dist/vue.js\"></script>\n\t<script src=\"https://unpkg.com/vue-router/dist/vue-router.js\"></script>\n\t<script>\n\t\t$0\n\t</script> \n</body>\n</html>"
	}
}

javascript.json

{
	"Print to fn-description": {
		"prefix": "desc",
		"body": [
			"/**",
			" * @description ",
			" * @param {} ",
			" * @param {} ",
			" * @returns {} ",
			" */",
			"$2"
		],
		"description": "用于描述封装函数相关作用"
	},
	"Print to fn": {
		"prefix": "fn",
		"body": [
			" (${e}) => {$0",
			"}"
		],
		"description": "用于快捷生成箭头函数"
	}
}

vue.json

{
	"Print to ht": {
		"prefix": "v",
		"body": [
			"<template>",
			"\t<div class=\"$TM_FILENAME_BASE\">$0</div>",
			"</template>\n",
			"<script>",
			"export default {",
			"\t",
			"}",
			"</script>\n",
			"<style lang=\"${less}\" scoped>",
			"\t",
			"</style>"
		],
		"description": "Log output to vue架构"
	}
}

Eslint.json

{
    "editor.fontSize": 16,
    // "cssrem.rootFontSize": 32,
    "liveServer.settings.donotShowInfoMsg": true,
    "javascript.updateImportsOnFileMove.enabled": "always",
    "eslint.validate": [
      "javascript",
      "javascriptreact",
      "vue-html",
      {
        "language": "vue",
        "autoFix": true
      },
      "html",
      "vue"
    ],
    "less.compile": {
      "outExt": ".css"
    },
    "eslint.autoFixOnSave": true,
    // 需要 npm install -g eslint-plugin-vue
    "eslint.options": {
      "extensions": [
        ".js",
        ".vue"
      ]
    },
    "explorer.confirmDragAndDrop": false,
    "files.autoSave": "afterDelay",
    "editor.wordWrap": "on",
    "sync.autoDownload": true,
    "sync.autoUpload": true,
    "sync.forceDownload": true,
    "sync.forceUpload": true,
    "workbench.iconTheme": "material-icon-theme",
    "dart.debugExternalLibraries": true,
    "dart.debugSdkLibraries": false,
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    },
}

快捷键使用

General

按 Press	功能 Function
Ctrl + Shift + P，F1	显示命令面板 Show Command Palette
Ctrl + P	快速打开 Quick Open
Ctrl + Shift + N	新窗口/实例 New window/instance
Ctrl + Shift + W	关闭窗口/实例 Close window/instance

基础编辑

按 Press	功能 Function
Ctrl+X	剪切行（空选定） Cut line (empty selection)
Ctrl+C	复制行（空选定）Copy line (empty selection)
Alt+ ↑ / ↓	向上/向下移动行 Move line up/down
Shift+Alt + ↓ / ↑	向上/向下复制行 Copy line up/down
Ctrl+Shift+K	删除行 Delete line
Ctrl+Enter	在下面插入行 Insert line below
Ctrl+Shift+Enter	在上面插入行 Insert line above
Ctrl+Shift+\	跳到匹配的括号 Jump to matching bracket
Ctrl+] / [	缩进/缩进行 Indent/outdent line
Home	转到行首 Go to beginning of line
End	转到行尾 Go to end of line
Ctrl+Home	转到文件开头 Go to beginning of file
Ctrl+End	转到文件末尾 Go to end of file
Ctrl+↑ / ↓	向上/向下滚动行 Scroll line up/down
Alt+PgUp / PgDown	向上/向下滚动页面 Scroll page up/down
Ctrl+Shift+[	折叠（折叠）区域 Fold (collapse) region
Ctrl+Shift+]	展开（未折叠）区域 Unfold (uncollapse) region
Ctrl+K Ctrl+[	折叠（未折叠）所有子区域 Fold (collapse) all subregions
Ctrl+K Ctrl+]	展开（未折叠）所有子区域 Unfold (uncollapse) all subregions
Ctrl+K Ctrl+0	折叠（折叠）所有区域 Fold (collapse) all regions
Ctrl+K Ctrl+J	展开（未折叠）所有区域 Unfold (uncollapse) all regions
Ctrl+K Ctrl+C	添加行注释 Add line comment
Ctrl+K Ctrl+U	删除行注释 Remove line comment
Ctrl+/	切换行注释 Toggle line comment
Shift+Alt+A	切换块注释 Toggle block comment
Alt+Z	切换换行 Toggle word wrap