Angular Visual Studio Code 插件配置推荐

萧琛
2023-12-01

Angular Visual Studio Code 插件配置推荐

基础

  1. Angular Files 可以快速创建angular文件
  2. Angular Follow Selector 可以单击HTML文件中的Angular选择器,并将其重定向到相应组件中的定义
  3. Angular Language Service 丰富html模板编辑体验
  4. Angular Snippets (Version 8) 为TypeScript和HTML添加了Angular的代码片段
  5. NG-ZORRO Snippets (简体中文版) NG-ZORRO 框架的代码片段
  6. Auto Import - ES6, TS, JSX, TSX 自动查找,解析并提供所有可用导入的代码操作和代码完成
  7. TSLint TSLint
  8. Hn-Ui Snippets Hn-Ui的代码片段

使用NG-ALAIN

  1. NG-ALAIN Extension Pack NG-ALAIN框架 拓展包,建议安装,所含插件自行查看
  2. NG-ALAIN Snippets (简体中文版) NG-ALAIN框架 代码片段

用户设置推荐

如何使用?
复制粘贴到setting.json里

setting.json 如何找到?步骤:

  1. F1,搜索Open User Setting
  2. 编辑器右上角第一个,打开用户设置json
{
  // 编辑器
  "editor.detectIndentation": false,
  "editor.formatOnSave": true,
  "editor.fontSize": 14,
  "editor.minimap.enabled": true,
  "editor.renderWhitespace": "none",
  "editor.renderControlCharacters": false,
  "editor.tabSize": 2,
  "editor.codeActionsOnSave": {
    "source.fixAll.tslint": true
  },
  "editor.wordWrap": "off",
  // "editor.defaultFormatter": "esbenp.prettier-vscode",
  "html.format.wrapLineLength": 120,
  "html.format.wrapAttributes": "preserve",
  "files.autoSave": "onFocusChange",
  "files.autoSaveDelay": 20000,
  "files.associations": {
    "*.cjson": "jsonc",
    "*.wxss": "scss",
    "*.wxs": "javascript",
    "*.json": "jsonc",
    "*.py": "python",
    "*.wpy": "vue"
  },
  // css
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  // js
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  "javascript.implicitProjectConfig.experimentalDecorators": true,
  "javascript.validate.enable": false,
  "javascript.updateImportsOnFileMove.enabled": "always",
  "[javascript]": {
    "editor.defaultFormatter": "vscode.typescript-language-features"
  },
  "typescript.updateImportsOnFileMove.enabled": "always",
  // 终端开始
  "terminal.integrated.fontFamily": "Consolas, 'Courier New', monospace",
  "terminal.integrated.fontSize": 14,
  "terminal.integrated.rendererType": "dom",
  // npm
  "npm.enableScriptExplorer": true,
  // vscode-typescript
  "vetur.validation.template": true,
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_line_length": 120,
      "wrap_attributes": "auto",
      "end_with_newline": false
    },
    "prettier": {
      "printWidth": 120,
      "singleQuote": true,
      "semi": false,
      "bracketSpacing": true,
      "InsertSpaceBeforeFunctionParenthesis": true,
      "eslintIntegration": true
    },
    "wrap_attributes": "force-aligned"
  },
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "html",
    "vue",
    {
      "language": "html",
      "autoFix": true
    },
    {
      "language": "vue",
      "autoFix": true
    }
  ],
  // git
  "git.confirmSync": false,
  "git.enableSmartCommit": true,
  "gitlens.advanced.messages": {
    "suppressCommitHasNoPreviousCommitWarning": false,
    "suppressCommitNotFoundWarning": false,
    "suppressFileNotUnderSourceControlWarning": false,
    "suppressGitVersionWarning": false,
    "suppressLineUncommittedWarning": false,
    "suppressNoRepositoryWarning": false,
    "suppressResultsExplorerNotice": false,
    "suppressShowKeyBindingsNotice": true
  },
  "gitlens.views.fileHistory.enabled": false,
  "gitlens.views.lineHistory.enabled": false,
  "emmet.includeLanguages": {
    "wxml": "html"
  },
  "diffEditor.ignoreTrimWhitespace": false,
  "window.zoomLevel": 0,
  // 主题
  "workbench.startupEditor": "newUntitledFile",
  "workbench.colorCustomizations": {
    "activityBarBadge.background": "#00BCD4",
    "list.activeSelectionForeground": "#00BCD4",
    "list.inactiveSelectionForeground": "#00BCD4",
    "list.highlightForeground": "#00BCD4",
    "scrollbarSlider.activeBackground": "#00BCD450",
    "editorSuggestWidget.highlightForeground": "#00BCD4",
    "textLink.foreground": "#00BCD4",
    "progressBar.background": "#00BCD4",
    "pickerGroup.foreground": "#00BCD4",
    "tab.activeBorder": "#00BCD4",
    "notificationLink.foreground": "#00BCD4",
    "editorWidget.resizeBorder": "#00BCD4",
    "editorWidget.border": "#00BCD4",
    "settings.modifiedItemIndicator": "#00BCD4",
    "settings.headerForeground": "#00BCD4",
    "panelTitle.activeBorder": "#00BCD4",
    "breadcrumb.activeSelectionForeground": "#00BCD4",
    "menu.selectionForeground": "#00BCD4",
    "menubar.selectionForeground": "#00BCD4"
  },
  "workbench.iconTheme": "vscode-icons",
  "workbench.sideBar.location": "left",
  "workbench.statusBar.visible": true,
  "breadcrumbs.enabled": true,
  "explorer.confirmDelete": false,
  "explorer.confirmDragAndDrop": false,
  "vsicons.dontShowNewVersionMessage": true,
  "http.proxy": "http://127.0.0.1:8080",
  // markdown
  "markdownlint.run": "onSave",
  "markdownlint.config": {
    "MD012": false,
    "MD013": false,
    "MD041": false
  },
  "[markdown]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.quickSuggestions": {
      "other": true,
      "comments": true,
      "strings": true
    },
    "editor.formatOnSave": true,
  },
  "markdownFormatter.formatOpt": {
    "indent_size": 2
  },
  "beautify.language": {
    "js": {},
    "css": [],
    "html": [
      "htm",
      "html"
    ]
  },
  "scss.lint.duplicateProperties": "warning",
  // prettier
  "prettier.printWidth": 120,
  "prettier.jsxSingleQuote": true,
  "prettier.jsxBracketSameLine": true,
  "prettier.singleQuote": true,
  "explorer.compactFolders": false
}
 类似资料: