VScode的设置操作

vscode 快捷键

关闭华硕电脑的 f1—f12电脑功能键 先按住 fn 不动 再 按住 esc

文件之间切换 ——Ctrl+Tab
打开集成终端 —— Ctrl + `
放大/缩小 Zoom in/out —— Ctrl - 或 Ctrl +
在当前行下边插入一行 —— Ctrl+Enter
在当前行上方插入一行 —— Ctrl+Shift+Enter
上下移动一行 —— Alt+Up 或 Alt+Down
向上向下复制一行 —— Shift+Alt+Up 或 Shift+Alt+Down
多光标选取 —— Alt + 鼠标单击
扩展/缩小选取范围 —— Shift+Alt+Left 和 Shift+Alt+Right
查找 —— Ctrl+F
查找替换 —— Ctrl+H
侧边栏显 / 隐 —— Ctrl+B
显示 Git —— Ctrl+Shift+G
转到上一个错误或警告—— Shift + F8
转到行首 —— Home
转到行尾 —— End
切换到代码片段末尾 —— Ctrl + 右键头 / 左键头
选中词 —— Ctrl + Shift + 右键头 / 左键头
复制光标向上或者向上批量添加内容 —— Ctrl + Alt + Up/Down
删除光标右侧的所有字 —— Ctrl+Delete
跳转某一行 输入行号 —— Ctrl + g
删除上一个词 —— Ctrl + backspace
重新打开一个关闭的页面—— Ctrl + Shift + T
返回上一步 前进下一步 —— Ctrl + z / Ctrl + y
搜索文件 —— Ctrl + p

注意：下面的默认vscode没有，需要自己配置

文件 ——> 首选项——> 键盘快捷方式 然后输入 转换为大写/小写 配置快捷键 即可

转换为大写—— Shift+u
转换为小写 —— Shift+L

选择要变成一行的所有行，然后右键 ，选择命令面板 （或者Ctrl+shift + p） 输入join Lines

选中以下部分代码变量 —— shift + Ctrl + 右箭头

在vscode中添加template

  {
	// Place your snippets for html here. Each snippet is defined under a snippet name and has a prefix, body and 
	// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
	// same ids are connected.
	// Example:
	// "Print to console": {
	// 	"prefix": "log",
	// 	"body": [
	// 		"console.log('$1');",
	// 		"$2"
	// 	],
	// 	"description": "Log output to console"
    // }
    
   //上面默认打开模板文件就已经存在,下面是添加vue模板代码
   
  //  必要代码的解释：
  // 为了防止更改模板时出现不必要的错误，所以简单说一下模板中的内容，
  // 开头写的："Print to console"，是一个模板名字。
  // "prefix": ""这里规定的是触发模板的关键词，我这里规定触发词为vue，可自行设置。
  // 模板都是在"body":[]中编写的。
  // 每一行模板代码都要用双引号""来包括。
  // 如果双引号包括的代码中间也出现了双引号，那么需要用转义字符 \ 转义。
  // \n 意味着换行，\t 是制表符，这两个用于生成时模板的缩进，让生成出来的模板便于阅读。
  // 模板中出现的 $1 代表着光标，它的位置即光标的默认位置，可以有多个光标：$2,$3,$4 等。
  // "description":""双引号包括的是对模板描述，同时也是你在.html页面输入触发词后，智能提示中出现的对触发词的解释。
  // 记得不要把Vscode中html.json文件自带的{}覆盖，只需覆盖注释部分，或直接写到注释下面。
  
  "Print to console": {
		"prefix": "vue",
		"body": [
      "
",
        "\t{{message}}$1",
      "
\n",
      "",
      ""
		],
		"description": "A vue file template"
  }
}

代码缩进几个空格

打开vscode
文件——首选项——设置；找到下面两处地方，先是修改缩进几个空格，这边是缩进2个空格，选择完点击 Editor ：Delect Indentation，不要打钩Delect Indentation，保存后重新打开即可。

vscode插件

插件列表 
名称	                  简述
Auto Close Tag	 自动闭合HTML标签
Auto Import	Typescript  自动import提示
Auto Rename Tag	修改HTML标签时，自动修改匹配的标签
Beautify css/sass/scss/less	css/sass/less格式化
Better Comments	编写更加人性化的注释
Bookmarks	添加行书签
Can I Use	HTML5、CSS3、SVG的浏览器兼容性检查
Code Runner	运行选中代码段（支持大量语言，包括Node）
Code Spellchecker	单词拼写检查
CodeBing	在VSCode中弹出浏览器并搜索，可编辑搜索引擎
Color Highlight	颜色值在代码中高亮显示
Color Info	小窗口显示颜色值，rgb,hsl,cmyk,hex等等
Color Picker	拾色器
Document This	注释文档生成
ESLint	ESLint插件，高亮提示
EditorConfig for VS Code	EditorConfig插件
Emoji	在代码中输入emoji
File Peek	根据路径字符串，快速定位到文件
Font-awesome codes for html	FontAwesome提示代码段
Git Blame	在状态栏显示当前行的Git信息
Git History(git log)	查看git log
GitLens	显示文件最近的commit和作者，显示当前行commit信息
Guides	高亮缩进基准线
Gulp Snippets	Gulp代码段
HTML CSS Class Completion	CSS class提示
HTML CSS Support	css提示（支持vue）
HTMLHint	HTML格式提示
Indenticator	缩进高亮
IntelliSense for css class names	css class输入提示
JavaScript (ES6) code snippets	ES6语法代码段
JavaScript Standard Style	Standard风格
Less IntelliSense	less变量与混合提示
Lodash	Lodash代码段
MochaSnippets	Mocha代码段
Node modules resolve	快速导航到Node模块
Code Outline	展示代码结构树
Output Colorizer	彩色输出信息
Partial Diff	对比两段代码或文件
Path Autocomplete	路径完成提示
Path Intellisense	另一个路径完成提示
PostCss Sorting	css排序
Prettify JSON	格式化JSON
Project Manager	快速切换项目
Quokka.js	不需要手动运行，行内显示变量结果
REST Client	发送REST风格的HTTP请求
React Native Storybooks	storybook预览插件，支持react
React Playground	为编辑器提供一个react组件运行环境，方便调试
React Standard Style code snippets	react standar风格代码块
Sass	sass插件
Settings Sync	VSCode设置同步到Gist
Sort Typescript Imports	typescript的import排序
Sort lines	排序选中行
String Manipulation	字符串转换处理（驼峰、大写开头、下划线等等）
Syncing	vscode设置同步到gist
TODO Parser	Todo管理
TS/JS postfix completion	ts/js前缀提示
TSLint	TypeScript语法检查
Test Spec Generator	测试用例生成（支持chai、should、jasmine）
TypeScript Import	TS自动import
TypeSearch	TS声明文件搜索
Types auto installer	自动安装@types声明依赖
VSCode Great Icons	文件图标拓展
Version Lens	package.json文件显示模块当前版本和最新版本
View Node Package	快速打开选中模块的主页和代码仓库
VueHelper	Vue2代码段（包括Vue2 api、vue-router2、vuex2）
filesize	状态栏显示当前文件大小
ftp-sync	同步文件到ftp
gitignore	.gitignore文件语法
htmltagwrap	快捷包裹html标签
language-stylus	Stylus语法高亮和提示
markdownlint	Markdown格式提示
npm Intellisense	导入模块时，提示已安装模块名称
npm	运行npm命令
stylelint	css/sass/less代码风格
vetur	目前比较好的Vue语法高亮
vscode-database	操作数据库，支持mysql和postgres
vscode-icons	文件图标，方便定位文件
vscode-random	随机字符串生成器
vscode-styled-components	styled-components高亮支持
vscode-styled-jsx	styled-jsx高亮支持

文件缩进问题设置

setting.json的设置

{
    "workbench.startupEditor": "none", // 不显示vscode启动欢迎页
    "workbench.editor.enablePreview": false, // 打开文件不覆盖
    "workbench.colorTheme": "One Monokai", // 主题
    "workbench.iconTheme": "vscode-great-icons", // 图标
    "security.workspace.trust.untrustedFiles": "open", //始终允许不受信任的文件引入受信任的工作区，而不显示提示
    "terminal.integrated.tabs.enabled": true, // 控制终端选项卡显示为侧边列表
    "liveServer.settings.donotShowInfoMsg": true, // 底部显示live serve操作信息，需安装live serve才生效
    "editor.tabSize": 2,
    "editor.fontLigatures": true, // 使用变体连体字
    "editor.fontSize": 16,
    "editor.fontWeight": 400,
    "editor.formatOnSave": true, // 保存的时候是否格式化
    "editor.formatOnType": false, // 在键入一行后是否格式化
    "editor.formatOnPaste": false, // 在粘贴时是否格式化
    "javascript.format.semicolons": "remove", // 去除js的分号
    "javascript.format.insertSpaceBeforeFunctionParenthesis": false, // 让函数(名)和后面的括号之间加个空格
    "typescript.format.semicolons": "remove", // 处理ts的分号
    "typescript.format.insertSpaceBeforeFunctionParenthesis": false, // 让函数(名)和后面的括号之间加个空格
    /*
    * 在不受支持的语言与Emmet支持的语言之间添加映射，表示按映射的语言处理不受支持的语言
    */
    "emmet.includeLanguages": {
        "vue": "html",
        "vue-html": "html",
        "wxml": "html"
    },
    /*
    * vetur格式化
    */
    "vetur.format.defaultFormatter.html": "prettier",
    "vetur.format.defaultFormatter.css": "prettier",
    "vetur.format.defaultFormatter.postcss": "prettier",
    "vetur.format.defaultFormatter.scss": "prettier",
    "vetur.format.defaultFormatter.less": "prettier",
    "vetur.format.defaultFormatter.stylus": "stylus-supremacy",
    "vetur.format.defaultFormatter.js": "prettier",
    "vetur.format.defaultFormatter.ts": "prettier",
    "vetur.format.defaultFormatter.sass": "sass-formatter",
    "vetur.format.defaultFormatterOptions": {
        "prettier": {
            "singleQuote": true, // 单引号
            "semi": false, // 句尾不加;
            "arrowParens": "avoid", // allow paren-less arrow functions 箭头函数的参数使用圆括号
            "htmlWhitespaceSensitivity": "ignore", //忽略自闭合标签
            "trailingComma": "none", // 对象最后一个属性是否加 (,) 逗号
            // "eslintIntegration": true,
            // "end_with_newline": false, //是否允许以换行符结尾
        }
    }
}
/*
  * eslint的配置，当eslint格式化与vscode和vetur格式化冲突时启用
  * 需在项目根路径建立.vscode/settings.json，并添加如下配置
  
  {
    "editor.formatOnSave": false, // 取消保存的时候自动格式化
    "eslint.validate": [
      "javascript",
      "javascriptreact",
      "html",
      "vue",
      "typescript",
      "typescriptreact"
    ],
    //每次保存的时候按照eslint格式进行修复
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    }
  }
  */

设置打开默认浏览器

安装完 open in browser插件

在安装完 open in browser 插件后，在打开的html文件代码中右键鼠标可以看到多了两个打开选择

1、Open in Default Browsers：使用默认浏览器打开 快捷键：alt+b ；
2、Open in Other Browsers：使用其他浏览器打开 快捷键：alt+shift+b；

然后如下设置默认浏览器

快速输入多个标签写法：