Visual Studio Code配置

2022-01-20 02:15:18

- typings
- 插件

1 typings

智能提示工具
如果未安装node, 请先安装nvm(node版本管理工具)
安装typings
```
npm install -g typings
```
更新typings
```
npm update -g typescript
```
安装提示补全，需要进入到项目根目录下，安装完后，会在根目录下出现一个typings的文件夹
安装node.js补全
```
typings install dt~node --global
```
安装koa补全
```
typings install dt~koa
```
开启智能提示
- 方法1 在需要智能提示的文件顶部添加提示信息文件所在的目录，注意文件之间的相对位置
```
/// <reference path="./typings/index.d.ts" />
```
- 方法2 在项目的根目录下添加一个jsconfig.json文件，内容可以参考JavaScript in VS Code
```
{
    "compilerOptions": {
        "target": "ES6"
    },
    "exclude": [
        "node_modules",
        "**/node_modules/*"
    ]
}
```
  - 对提示有特殊要求的自行参看文档，没有特殊要求的就用上面的这个。

2 插件

Auto Close Tag: 匹配标签。
- 当输入<h1>时会自动出现</h1>
Atom One Dark Theme: 主题
Auto-Open Markdown Preview: markdown实时预览
Auto Rename Tag: 修改标签辅助。
- 修改一个会自动修改另一个
beautify: 代码格式化工具。
- 按F1, 输入beautify file或者beautify selection，选择并确定。
colorize: 在css中写颜色相关代码时显示颜色。
ESlint: 语法错误检查，默认已安装
fileheader: 添加文件头部注释。
- ctrl+alt+i会在文件头部添加注释，在全局设置中找到fileheader相关进行设置
Git History: git历史记录

HTML Snippets: H5代码片段以及提示。

需要在全局设置中找到 files.associations 进行设置

"files.associations": {
    // extension name : html
    "*.tpl": "html",
    "*.js": "html"
}

HTML CSS Support: 让HTML标签上写class智能提示当前项目所支持的样式
HTMLHint: Html代码检测
JavaScript Atom Grammar: atom风格的语法高亮
JavaScript (ES6) code snippets: ES6语法代码段
jQuery Code Snippets: jQuery提示工具
markdownlint: markdown格式提示
- 按下F8看效果
npm: npm支持
Npm Intellisense: node.js require提示
Path Intellisense: 路径智能提示
Path Autocomplete: 路径智能补全
Project Manager: 多个项目切换工具
- 按F1，输入Project Manager: Save Project
- 输入一个名称表示当前项目
- 按F1，输入Project Manager: List Project To Open
- 选择想要打开的项目，然后确认
TODO Parser: TODO管理
- 打开当前文件，在工具的底部左侧，有一个文档图标的表示TODO的个数
- 按F1，输入TODO，可以看见Prase TODOs(all files)和Prase TODOs(current documents)两个选择
vscode-icons: 给资源目录加上图标，非常棒