前端vscode插件推荐

前端vscode插件推荐


前端vscode插件推荐

个人配置

{
  "files.autoSave": "onFocusChange",
  "editor.formatOnPaste": true,
  "editor.formatOnSave": true,
  "editor.formatOnType": true,
  "editor.detectIndentation": false,
  "eslint._legacyModuleResolve": true,
  "eslint.alwaysShowStatus": true,
  //配置eslint
  "eslint.autoFixOnSave": true,
  "editor.fontSize": 14,
  "editor.fontFamily": "Consolas",
  //换行
  "editor.wordWrap": "on",
  "editor.renderWhitespace": "boundary",
  "editor.tabSize": 2,
  "editor.useTabStops": false,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "html",
    {
      "language": "vue",
      "autoFix": true
    }
  ],
  "eslint.options": {
    "plugins": ["html"]
  },
  //关闭自动更新扩展
  "extensions.autoUpdate": false,
  "files.trimTrailingWhitespace": false,
  "files.autoSaveDelay": 3000,
  // gitlens配置
  "gitlens.advanced.messages": {
    "suppressCommitHasNoPreviousCommitWarning": true,
    "suppressCommitNotFoundWarning": true,
    "suppressFileNotUnderSourceControlWarning": true,
    "suppressGitVersionWarning": true,
    "suppressLineUncommittedWarning": true,
    "suppressNoRepositoryWarning": true,
    "suppressResultsExplorerNotice": true,
    "suppressShowKeyBindingsNotice": true
  },
  "git.confirmSync": false,
  "html.format.indentInnerHtml": true,
  "html.validate.scripts": true,
  "typescript.validate.enable": true,
  "javascript.validate.enable": true,
  "javascript.format.enable": true,
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  "css.validate": false,
  "less.validate": false,
  "search.followSymlinks": false,
  "scss.validate": true,
  "typescript.format.insertSpaceAfterFunctionKeywordForAnonymousFunctions": true,
  "typescript.format.insertSpaceAfterKeywordsInControlFlowStatements": true,
  "typescript.format.insertSpaceBeforeFunctionParenthesis": true,
  //右键格式化文件
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  "vetur.format.defaultFormatter.scss": "prettier",
  "vetur.validation.template": true,
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": "force-aligned"
      // #vue组件中html代码格式化样式
    }
  },
  "vetur.format.defaultFormatter.stylus": "stylus-supremacy",
  "workbench.startupEditor": "newUntitledFile",
  "workbench.iconTheme": "vscode-icons",
}

VS Code JavaScript(ES6) snippets : 当前最流行的,已有超过 120 万的下载量。这个插件为 JavaScript、TypeScript、HTML、React 和 Vue 提供了 ES6 的语法支持;

JavaScript Snippets : 提供了 ES6 代码片段的集合。它包含对 Mocha、Jasmine 等其他 BBD(Behavior-Driven Development)测试框架的支持;

vetur : Vue 的语法高亮、智能感知、Emmet 等;

VueHelper : snippet 代码片段;

IntelliJ IDEA Keybindings : webstorm 的快捷键(如果之前用 webstorm 开发,建议安装);

HTML Snippets : 超级实用且初级的 H5 代码片段以及提示;

HTML CSS Support : 让 html 标签上写 class 智能提示当前项目所支持的样式,新版已经支持 scss 文件检索;

Csscomb:css 、less、sass 的代码格式化;

Guides: 代码的标签对齐线。

Debugger for Chrome : 让 vscode 映射 chrome 的 debug 功能,静态页面都可以用 vscode 来打断点调试,需要另外配置,有点麻烦;

jQuery Code Snippets : jquery 重度患者必须品;

vscode-icon : 让 vscode 资源树目录加上图标;

Path Intellisense : 自动路劲补全;

Npm Intellisense : require 时的包提示(最新版的 vscode 已经集成此功能);

ESlint : ESlint 接管原生 js 提示,可以自定制提示规则;

HTMLHint : html 代码检测;

Project Manager : 在多个项目之前快速切换的工具;

beautify : 格式化代码的工具;

Atuo Rename Tag : 修改 html 标签,自动帮你完成尾部闭合标签的同步修改,不过有些 bug;

GitLens : 丰富的 git 日志插件;

Bracket Pair Colorizer : 让括号拥有独立的颜色,易于区分。可以配合任意主题使用;

CSS Peek : 使用此插件,你可以追踪至样式表中 CSS 类和 ids 定义的地方。当你在 HTML 文件中右键单击选择器时,选择“ Go to Definition 和 Peek definition ”选项,它便会给你发送样式设置的 CSS 代码;

File Peek:

Vue Peek:

Prettier : Prettier 是目前 Web 开发中最受欢迎的代码格式化程序。安装了这个插件,它就能够自动应用 Prettier,并将整个 JS 和 CSS 文档快速格式化为统一的代码样式。如果你还想使用 ESLint,那么还有个 Prettier – Eslint 插件;

koroFileHeader:自动生成头部注释

注:ESlint 代码格式仍然报错解决方法

vscode 在设置中搜索行尾,选择 LF,已创建的文件右下角直接切换, 或者.eslintrc.js 文件的 rules 字段添加 ‘linebreak-style’: [‘off’, ‘windows’]

GitLens: 虽然Git功能已内置于 VS Code 中,但 GitLens 能够提供更多的版本控制功能来“增强”你的编辑器。它提供了对代码的深入分析功能,可以向你显示更改时间以及更改后的代码。你甚至可以比较不同的分支、标签和提交。总的来说,这个扩展插件会让你拥有全新的视觉感受。

Bracket Pair Colorizer 2: Bracket Pair Colorizer 2 是一个简单的扩展,可以使代码更容易阅读。它可以对匹配括号的对代码着色,使你可以非常直观地确定函数的开始和结束位置。还可以选择要使用的颜色。


  • live server
  • live share
  • Live Sass Compilerritwickdey


前端vscode插件推荐

  • colorize
  • CSS Blocks

参考

分享到 :
相关推荐

发表评论

登录... 后才能评论