Visual Studio Code配置

---

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: 给资源目录加上图标，非常棒