VSCode入门

简体中文语言包

可以让我们的vscode配置同步到云端，当我们跟换电脑或者再次安装vscode的时候，只需要登录账号即可同步配置了

安装完插件，需要登录github账号或者微软账号才能进行同步

• **注册 WakaTime：**需要一个 GitHub 账号，所以第一步需要注册 GitHub
• **生成 Api Key：**Api key 是绑定你的工作站和 Wakatime 插件的中介，通过 Api key 相关的工作都可以汇聚到同一个 WakaTime 统计账户上，你的 Api key 可以在waketime官网的 右上角账户的Settings 处查看。

• **绑定插件：**打开VScode，Ctrl+Shift+P打开命令面板，输入>wakatime，填入刚才官网复制的API Key，后续的工作都会统计到官网了。官网帮助页可以查看所有支持的IDE。

• **查看工作统计：**直接打开官网查看dashboard。

  

• 或者在vscode左下角也可以打开

自动添加 HTML/XML 关闭标签，与 Visual Studio IDE 或 Sublime Text 一样。

自动重命名配对的HTML/XML标签

右击选择浏览器打开html文件

开启一个本地服务器，然后通过端口访问页面，页面修改可以实时重新加载

• 可以直接跳转到css文件或者用新的编辑器打开（F12）
• 内联加载 css 文件并在此处进行快速编辑。( Ctrl+Shift+F12)
• 在符号 ( Ctrl+hover)上悬停时显示定义

安装完插件后，保存页面时会自动格式化代码。右键也可以格式化文档。

VScode官方钦定Vue插件，Vue开发者必备。内含语法高亮，智能提示，emmet，错误提示，格式化，自动补全，debugger等实用功能

Git 图形化显示和操作，安装完成后，左下角可以点击打开git图形化界面

安装完插件之后需要登录github

可以查看每行代码或每块代码的更改信息

点击作者，可以查看作者的提交操作详情

点击提交，可以查看明细信息

VSCode官方出品的图标库，漂亮的目录树图标主题

可以将注释代码细分成警告，疑问，TODO等，使用不同的符号标记，会展示不同的颜色，支持各种不同的语言

设置better-comments.multilineComments=true将控制是否使用注释标签设置多行注释的样式。

设置better-comments.highlightPlainText=true将控制纯文本文件中的评论是否使用注释标签设置样式。

可以设置better-comments.tags更换注释的符号

使用代码动作为您完成重复性任务，在 JavaScript（或 TypeScript/Flow）中编辑代码时，此 VS Code 扩展提供了各种代码操作（快速修复）。只需注意左侧的灯泡并按下它即可了解如何转换光标下的代码。

代码动作

• 条件
  • 翻转if-else
  • 删除多余的其他
  • 将 if-else 替换为 ?:
  • 简化 if-else
  • 翻动 ？：
  • 简化 ?:
  • 合并嵌套if语句**（新）**
• 声明
  • 将 var/const 转换为 let
  • 将变量转换为常量
  • 拆分成多个声明
  • 拆分为声明和初始化
  • 合并声明和初始化
• 字符串
  • 用模板字符串替换字符串
  • 用常规字符串替换模板字符串
  • 拆分光标下的字符串
  • 修剪字符串内的空格**（新）**
• 功能
  • 将速记箭头函数转换为语句
  • 转换为速记箭头函数
  • 将括号添加到单箭头函数参数
  • 将函数转换为箭头函数
  • 将箭头函数转换为常规函数**（新）**
  • 将函数声明转换为箭头函数**（新）**
• 异步
  • [on selection] 并行运行选定的 await 语句Promise.all
• TypeScript
  • 将枚举转换为字符串枚举**（新）**
  • 将字符串枚举转换为联合类型**（新）**
  • 将字符串的联合类型转换为字符串枚举**（新）**
• JSX / TSX
  • 用 {} 包装值（JSX 属性）
  • 从 JSX 属性中移除 {}
  • 折叠/展开空标签
• React
  • 将函数包装到 useCallback() 挂钩中**（新）**
  • React：使用 React.forwardRef() 包装组件函数**（新）**
  • React：用 React.memo() 包装组件函数**（新）**
  • React：将函数转换为 React.FunctionComponent 声明**（新）**

（同时支持 JavaScript 和 TypeScript）的 ES6 语法中的 JavaScript 代码片段。支持的文件类型如下：

• JavaScript (.js)
• TypeScript (.ts)
• JavaScript React (.jsx)
• TypeScript React (.tsx)
• Html (.html)
• Vue (.vue)

下面是所有可用代码段的列表以及每个代码段的触发器。⇥表示键TAB。

导入导出

类帮助

各种方法

控制台方法

规范js代码书写规则，如果觉得太过严谨，可自定义规则

ts的书写规范，这个插件是一个系列，同时还提供了TSLint (deprecated)，TSLint Vue，TSLint Vue-TSX

是拼写检查程序，检查不常见的单词，如果单词拼写错误，会给出警告提示

用于生成文件头部注释和函数注释的插件，支持所有主流语言，功能强大，灵活方便，文档齐全，食用简单！说明文档参考地址

打开设置面板，搜索fileheader，打开配置文件settings.json，配置文件头注释和函数注释

把下面的内容贴进去，也可以自定义，保存，重启编辑器

// 头部注释
"fileheader.customMade": {
    // Author字段是文件的创建者 可以在specialOptions中更改特殊属性
    // 公司项目和个人项目可以配置不同的用户名与邮箱 搜索: gitconfig includeIf  比如: https://ayase.moe/2021/03/09/customized-git-config/
    // 自动提取当前git config中的: 用户名、邮箱
    "Author": "git config user.name && git config user.email", // 同时获取用户名与邮箱
    // "Author": "git config user.name", // 仅获取用户名
    // "Author": "git config user.email", // 仅获取邮箱
    // "Author": "OBKoro1", // 写死的固定值 不从git config中获取
    "Date": "Do not edit", // 文件创建时间(不变)
    // LastEditors、LastEditTime、FilePath将会自动更新 如果觉得时间更新的太频繁可以使用throttleTime(默认为1分钟)配置更改更新时间。
    "LastEditors": "git config user.name && git config user.email", // 文件最后编辑者 与Author字段一致
    // 由于编辑文件就会变更最后编辑时间，多人协作中合并的时候会导致merge
    // 可以将时间颗粒度改为周、或者月，这样冲突就减少很多。搜索变更时间格式: dateFormat
    "LastEditTime": "Do not edit", // 文件最后编辑时间
    // 输出相对路径，类似: /文件夹名称/src/index.js
    "FilePath": "Do not edit", // 文件在项目中的相对路径 自动更新
    // 插件会自动将光标移动到Description选项中 方便输入 Description字段可以在specialOptions更改
    "Description": "", // 介绍文件的作用、文件的入参、出参。
    // custom_string_obkoro1~custom_string_obkoro100都可以输出自定义信息
    // 可以设置多条自定义信息 设置个性签名、留下QQ、微信联系方式、输入空行等
    "custom_string_obkoro1": "", 
    // 版权声明 保留文件所有权利 自动替换年份 获取git配置的用户名和邮箱
    // 版权声明获取git配置, 与Author字段一致: ${git_name} ${git_email} ${git_name_email}
    "custom_string_obkoro1_copyright": "Copyright (c) ${now_year} by ${git_name_email}, All Rights Reserved. "
    // "custom_string_obkoro1_copyright": "Copyright (c) ${now_year} by 写死的公司名/用户名, All Rights Reserved. "
},
// 函数注释
"fileheader.cursorMode": {
    "description": "", // 函数注释生成之后，光标移动到这里
    "param": "", // param 开启函数参数自动提取 需要将光标放在函数行或者函数上方的空白行
    "return": "",
}

文件头部注释快捷键：window：ctrl+win+i,mac：ctrl+cmd+i, linux: ctrl+meta+i,Ubuntu: ctrl+super+i

函数注释注释快捷键：window：ctrl+win+t,mac：ctrl+cmd+t,linux: ctrl+meta+t, Ubuntu: ctrl+super+t

快捷键冲突问题：可以在文件->首选项->键盘快捷方式 中进行配置和修改

图形注释：在命令面板输入codedesign可以查看各种图形注释，一键生成图形注释

markdown相关知识可以查看Typora详解

可以写markdown，同时预览markdown，大纲可以查看标题树。

命令面板输入markdown，还能轻松转换成html文件。html文件可以用浏览器打开，导出pdf。

• 任何违反markdown规则的行都将在编辑器中触发警告。警告由绿色波浪下划线表示。
• 将鼠标指针悬停在绿线上以查看警告或按F8和Shift+F8/⇧F8循环显示所有警告。
• 有关markdownlint警告的更多信息，请将光标放在一条线上并单击灯泡图标打开快速修复对话框。单击对话框中的警告之一将在默认 Web 浏览器中显示该规则的帮助条目。