Angular VS Code Extension Pack：提升Angular开发效率的必备工具

Angular VS Code Extension Pack是一款专为Angular开发者设计的扩展包，旨在提升您的开发效率和体验。受到John Papa的Angular Essentials - Extension Pack for VS Code的启发，本扩展包集成了多种实用的VS Code扩展，帮助您在Angular开发中更加得心应手。

推荐设置

为了优化您的开发环境，我们推荐以下设置：

编辑器设置

  "editor.codeLens": false,
  "editor.renderWhitespace": "none",
  "editor.autoIndent": true,
  "editor.tabSize": 2,
  "editor.wordWrap": "off",
  "editor.formatOnSave": true,
  "editor.formatOnType": false,
  "[typescript]": {
    "editor.formatOnPaste": false
  },
  "[css]": {
    "editor.formatOnSave": false,
    "editor.formatOnPaste": false
  },
  // 由stylelint扩展推荐
  "css.validate": false,
  "less.validate": false,
  "scss.validate": false,

文件设置

  "files.exclude": {
    "**/.git": true,
    "**/.DS_Store": true,
    "**/*.js": {
      "when": "$(basename).ts"
    },
    "**/*.js.map": {
      "when": "$(basename)"
    },
    "**/*.css": {
      "when": "$(basename).css"
    }
  },
  "files.hotExit": "onExit",
  "files.defaultLanguage": "typescript",
  "files.trimTrailingWhitespace": true,

Prettier设置

  "prettier.singleQuote": true,
  "prettier.printWidth": 120,
  "prettier.stylelintIntegration": true,

Stylelint设置

（作为package.json中的stylelint属性或.stylelintrc文件）

{
  "extends": [
    "stylelint-config-standard",
    "stylelint-config-concentric-order",
    "./node_modules/prettier-stylelint/config.js"
  ],
  "rules": {
    "at-rule-no-unknown": null,
    "selector-type-no-unknown": null
  }
}

请确保安装以下包：

• stylelint-config-standard
• stylelint-config-concentric-order
• prettier-stylelint

扩展包包含的扩展列表：

• Better Comments - 提高注释的可读性
• Angular Language Service - 为Angular模板提供丰富的编辑体验
• Path Intellisense - 文件名自动完成
• GitLens — Git超级增强版 - 增强Visual Studio Code内置的Git功能
• TSLint - 为Visual Studio Code提供TSLint
• Node npm - 支持运行package.json文件中定义的npm脚本，并验证已安装的模块与package.json中定义的依赖项
• Prettier - 代码格式化器 - 使用Prettier格式化JavaScript/TypeScript/CSS
• angular2-switcher - 轻松导航到typescript(.ts) | 模板(.html) | 样式(.scss/.sass/.less/.css)
• Hungry Delete - 智能退格功能
• Angular TypeScript Snippets for VS Code - 为Angular添加TypeScript和HTML代码片段
• Debugger for Chrome - 从VS Code中调试Google Chrome中的代码的扩展
• angular2-inline - 为Angular中的内联模板和样式表添加特定功能
• stylelint - 使用stylelint来检查CSS/SCSS/Less的扩展
• Auto Import - 自动查找、解析并为所有可用的导入提供代码操作和代码完成
• Formatting Toggle - 一个VS Code扩展，允许您通过简单点击打开和关闭格式化器（Prettier, Beautify, ...）
• javascript console utils - 轻松插入和删除console.(*)语句
• jumpy - 提供快速光标移动，灵感来自于Atom的同名包

希望您能享受这些工具带来的便利和效率提升！