编译器vsCode常用的工具

1. Chinese (Simplified) Language Pack for Visual Studio Code    

　　适用于 VS Code 的中文（简体）语言包

　　安装后，在 locale.json 中添加 "locale": "zh-cn"，即可载入中文（简体）语言包。要修改 locale.json，你可以同时按下 Ctrl+Shift+P 打开命令面板，之后输入 "config" 筛选可用命令列表，最后选择配置语言命令。请参阅文档并获取更多信息。

2. Debugger for Chrome

支持的功能

• 设置断点，包括启用源映射时的源文件
• 单步，包括Chrome页面上的按钮
• “本地”窗格
• 调试动态添加的eval脚本，脚本标记和脚本
• 手表
• 安慰

3. ES5 to ES6  使用lebab将ES5 javascript转换为ES6。

　　用法

　　启动命令调色板并搜索ES5 to ES6。

　　这将在同一目录中创建一个临时文件（无标题），可以保存该文件以供参考。

4. Git History 

• 查看和搜索git日志以及图表和详细信息。
• 查看该文件的上一个副本。
• 查看和搜索历史记录
  • 查看一个或所有分支的历史记录（git log）
  • 查看文件的历史记录
  • 查看文件中一行的历史记录（Git Blame）。
  • 查看作者的历史
• 相比：
  • 比较分支
  • 比较提交
  • 比较提交中的文件
• 其他功能：
  • Github头像
  • 樱桃采摘提交
  • 恢复提交
  • 从提交创建分支
  • 在树视图中查看提交信息（所有更改的快照）
  • 合并和变革

打开文件以查看历史记录，然后按F1并选择/键入“Git：查看历史记录”，“Git：查看文件历史记录”或“Git：查看行历史记录”。

可用命令

• 查看Git历史记录（git log）（git.viewHistory）
• 查看文件历史记录（git.viewFileHistory）
• 查看行历史（git.viewLineHistory）

5. jshint 　　

建立

扩展名jshint在当前目录和全局包位置中查找模块。您可以jshint在本地安装npm install jshint或全局安装npm install -g jshint。如果jshint模块位于其他位置，请使用该jshint.nodePath设置指定正确的路径。该jshint.packageManager 设置可用于指定您正在使用的包管理器，npm或yarn。

要检查jshint加载的位置，请JSHint: Show output在扩展开始后使用该命令在输出面板中查看扩展日志。

配置选项

jshint扩展使用jshint网站上描述的标准jshint配置选项。

可以在多个位置指定选项，主要是模仿jshint的默认行为。扩展程序按以下方式查找其配置选项，并在第一个正匹配时停止：

1. 在用户或工作空间设置中指定的选项文件，如下所示："jshint.config" : "<file path>"。文件路径相对于工作空间的根文件夹进行解释。
2. 位于当前目录或当前目录的任何父文件jshintConfig中的package.json文件中的属性值。
3. 一个.jshintrc位于当前目录或当前目录的任何父文件。
4. 一个.jshintrc位于用户的主目录文件。
5. jshint.options用户或工作区设置中指定的值。默认jshint.options为空。

.jshintrc可以使用此处extends描述的属性链接文件。

排除选项

为了忽略特定文件或文件夹，可以在许多位置指定排除选项，这些选项主要模仿jshint的默认行为。扩展按以下方式查找其排除选项，并在第一个正匹配时停止：

1. 在用户或工作空间设置中指定的文件，如下所示："jshint.excludePath" : "<file path>"。文件路径相对于工作空间的根文件夹进行解释。该文件包含指定应排除的文件的glob模式。glob模式相对于工作空间的根文件夹进行解释。
2. 一个.jshintignore位于当前目录或当前目录的任何父文件。此文件中的glob模式是相对于.jshintignore文件的位置进行解释的 。
3. jshint.exclude用户或工作空间设置中的属性值。该属性具有以下形式："jshint.exclude" : { "<glob pattern>" : true, "<glob pattern>" : true }。glob模式相对于工作空间的根文件夹进行解释。

使用npm minimatch模块解释glob模式。请注意，解释模式之间minimatch和.gitignore模式之间存在细微差别。大多数noteably，**/name而name不是在同一个minimatch，而他们正在考虑相等.gitignore。**/name如果要匹配子树中的名称，请始终使用。

默认情况下不排除任何文件。

禁用JSHint

为了禁用工作空间的jshint，请在工作"jshint.enable" : false区设置中指定。jshint默认启用。

 6. npm

节点npm

此扩展支持运行文件中定义的npm脚本，package.json并根据中定义的依赖项验证已安装的模块package.json。

注意验证通过运行完成，npm并且在管理模块时不运行yarn。

该package.json验证报告警告，模块：

• 在package.json中定义，但未安装
• 已安装但未在package.json中定义
• 已安装但不满足package.json中定义的版本。

npm为报告的警告提供了快速修复。

7.  React Native Snippet

此扩展为您提供ES6，ES7，Typescript中的Javascript和React / Redux片段以及Vs代码的 babel插件功能

这里是市场React Native，StyleSheet，ReactJS，Redux Snippet的直接链接

 8. TSLint (deprecated)   （坑太多，慎用）

先决条件

扩展要求在本地或全局安装tslint和typescript模块。扩展将使用最接近linted文件安装的tslint模块。要全局安装tslint和typescript，您可以运行npm install -g tslint typescript。

9. Velocity     （Visual Studio Code 的Apache Velocity Textmate包的端口。）

10. Vetur       （写vue必安装的）

VS代码的Vue工具，由vue-language-server提供支持。

Doc：https：//vuejs.github.io/vetur

尝试使用Veturpack！

?VueConf2017 幻灯片和视频 ?

特征

• 语法加亮
• 片段
• 蚂蚁
• Linting /错误检查
• 格式化
• 自动完成
• 调试

快速开始

• 安装Vetur。
• 尝试使用Veturpack，这是一个基于Vuepack的预配置Vue样板。
• 有关设置，请参阅设置页面。
• 有关设置特定功能的信息，请参阅每个功能的页面。

11. vscode wxml  （微信小程序必安装）

为 VSCode 提供 wxml 语法支持及代码片段

 

安装

1. 打开编辑器，Ctrl + Shift + X，搜索 weapp-wxml。
2. 点击 install

使用

键入关键词，然后回车。关键词不区分大小写

 

12.  vscode-styled-components

vscode风格组件 样式突出显示和样式组件的 IntelliSense 。 使用基于language-sass和language-css构建的CSS语法。 安装 在VSCode内，按Ctrl+P，然后输入： ext install vscode-styled-components

13. ESLint

VS Code ESLint扩展

将ESLint集成到VS代码中。如果您是ESLint的新手，请查看文档。

扩展使用安装在打开的工作区文件夹中的ESLint库。如果文件夹未提供，则扩展名将查找全局安装版本。如果尚未在本地或全局安装ESLint，请npm install eslint在工作区文件夹中运行本地安装或npm install -g eslint全局安装。

在新文件夹上，您可能还需要创建.eslintrc配置文件。您可以通过使用VS Code命令Create ESLint configuration或eslint在终端中运行命令来执行此操作。如果您已全局安装ESLint（参见上文），则eslint --init在终端中运行。如果您已在本地安装ESLint，则.\node_modules\.bin\eslint --init在Windows和./node_modules/.bin/eslint --initLinux和Mac下运行。

设置选项

这个扩展有助于以下变量的设置：

• eslint.enable：启用/禁用ESLint。默认情况下启用。

• eslint.provideLintTask：扩展是否提供lint任务来lint整个工作区文件夹。

• eslint.packageManager：控制用于解析ESLint库的包管理器。如果全局解析ESLint库，这只会产生影响。有效值为"npm"或"yarn"或"pnpm"。

• eslint.options：用于配置如何使用ESLint CLI Engine API启动ESLint的选项。默认为空选项包。指向自定义.eslintrc.json文件的示例是：

  {
    "eslint.options": { "configFile": "C:/mydirectory/.eslintrc.json" }
  }
  

• eslint.run- 运行linter onSave或者onType，默认是onType。

• eslint.autoFixOnSave - 启用保存时自动修复。请注意，自动修复的保存仅当VS代码的files.autoSave要么是off，onFocusChange或onWindowChange。它无法使用afterDelay。

• eslint.quiet - 忽略警告。

• eslint.runtime - 使用此设置设置节点运行时的路径以运行ESLint。

• eslint.nodePath- 例如，如果无法检测到已安装的ESLint包，请使用此设置/myGlobalNodePackages/node_modules。

• eslint.validate - 一组语言标识符指定要验证的文件。有点像"eslint.validate": [ "javascript", "javascriptreact", "html" ]。如果缺少该设置，则默认为["javascript", "javascriptreact"]。您还可以控制哪些插件应该提供自动修复支持。为此，只需在validate设置中使用属性language而autoFix不是简单提供对象文字string。一个例子是：

  "eslint.validate": [ "javascript", "javascriptreact", { "language": "html", "autoFix": true } ]
  

• eslint.workingDirectories - 要使用的工作目录的数组。ESLint解析eslintrc相对于工作目录的配置文件（例如）。这个新设置允许用户控制哪个工作目录用于哪些文件（另请参阅CLIEngine选项#cwd）。例：

  root/
    client/
      .eslintrc.json
      client.js
    server/
      .eslintignore
      .eslintrc.json
      server.js
  

  然后使用设置：

    "eslint.workingDirectories": [
      "./client", "./server"
    ]
  

  将使用服务器目录验证服务器目录中的文件作为当前的eslint工作目录。对于客户端目录中的文件也是如此。

  ESLint还在解析.eslintignore文件时或在验证相关导入语句时（如import A from 'components/A';无法找到基URI）时考虑进程的工作目录。为了使其正常工作，eslint验证过程也需要切换进程的工作目录。由于需要谨慎处理更改进程的工作目录，因此必须明确启用它。为此，请使用下面显示的对象文字语法作为服务器目录：

    "eslint.workingDirectories": [
      "./client", // Does not change the process's working directory
      { "directory": "./server", "changeProcessCWD": true }
    ]
  

  这将验证客户端文件夹中的文件，并将进程的工作目录设置为workspace folder服务器文件夹中的和文件，并将进程的工作目录设置为该server文件夹。这就像server在ESLint用作shell命令时切换到终端中的文件夹。

  如果workingDirectories省略该设置，则eslint工作目录和进程的工作目录为workspace folder。

• eslint.codeAction.disableRuleComment - 具有属性的对象：

  • enable - 在快速修复菜单中显示禁用lint规则。true默认情况下。
  • location-选择要么添加eslint-disable的评论separateLine或sameLine。separateLine是默认值。例：

  { "enable": true, "location": "sameLine" }
  

• eslint.codeAction.showDocumentation - 具有属性的对象：

  • enable - 在快速修复菜单中显示打开的lint规则文档网页。true默认情况下。

命令：

此扩展将以下命令提供给Command选项板。

• Create '.eslintrc.json' file：创建一个新.eslintrc.json文件。
• Fix all auto-fixable problems：将ESLint自动修复解决方案应用于所有可修复的问题。
• Disable ESLint for this Workspace：禁用此工作空间的ESLint扩展。
• Enable ESLint for this Workspace：为此工作空间启用ESLint扩展。

 

转载于:https://www.cnblogs.com/xuLessReigns/p/11283101.html