欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Visual Studio Code配置

程序员文章站 2022-06-26 08:42:56
...


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