vscode 插件记录下

vscode插件安装

  • Dracula Official 主题
  • Atom One Dark Theme 主题
  • Material Icon Theme 图标主题
  • Bracket Pair Colorizer 每一对括号不同颜色 （括号强迫症必备）
  • indent-rainbow 凸显缩进着色，让你的缩进一目了然
  • EditorConfig for VS Code vscode的风格配置文件
  • GitLens 在代码中显示每一行代码的提交历史
  • Chinese Language Pack 中文语言包

水桶装！直接全部安装，插件互不干扰。
根据【插件作用范围】，对于用不到的插件，不必安装
插件列表中, Ctrl+鼠标左键 点击标题 可以弹出对应官方介绍

  • Auto Rename Tag - 自动重命名配对的HTML / XML标记 【全局】
  • Bookmarks 对代码片段添加书签，便于跳转 【全局】
  • Code Runner node，python等代码不必开命令行即可运行 【全局】
  • Comment Translate 自动将英文翻译为中文 【全局】
  • HTML CSS Support 便于在html/css文件中快速书写属性 【 Supported Languages】
  • JavaScript (ES6) code snippets 快速书写ES6代码 【Supported languages】
  • cssrem 将css中的px自动转换为rem.再也不用计算器（大漠推介） 【局部】
  • Prettier 格式化，使用Prettier标准风格【局部】**
  • Eslint Js 语法检测 【全局】
  • Tslint Typescript 语法检测 【ts，js文件】
  • TypeScript Hero 快速书写Ts代码 【ts文件】
  • JSON to TS 将json代码转变为Ts代码 【全局】
  • markdownlint md文件预览 【md文件】
  • Markdown All in One md文件格式化 【md文件】
  • Babel JavaScript Js文件转译 【js文件】
  • VS Code ES7 React/Redux/React-Native/JS snippets 快速书写React(非react项目，禁用) 【js文件】
  • Python tab与空格的痛苦，写过python的都知道 【py文件】
  • XML Tools XML文件格式化高亮**【xml文件】**
  • Flutter 2018是 Flutter 最火爆的一年，2020生态繁荣发展中 【dart文件】
  • Awesome Flutter Snippets flutter 代码片段速写 【dart文件】
  • Built Value Snippets 配合Built Value快速生成模型 【dart文件】

  • View In Browser 迅速通过浏览器打开html文件 【局部】

  • Css Peek 在Html和Css文件中定位class和id样式. （右键单击选择器时，选择 Go to Definition和 Peek definition，vue中不可用）【html/css文件】

  • Path Intellisense 路径识别,书写文件引入地址时很方便。遗憾就是，对webpack项目中的路径别名无法扩展 【全局】

  • npm Intellisense 在import语句中，自动填充npm模块。【js文件】

  • language-stylus CSS预处理器，styl后缀文件的识别扩展 【styl文件】

  • filesize 在底部状态栏左侧，显示当前文件大小，还可以点击哟 【全局】

  • Better Comments 对注释内容着色。快捷方式： 编辑器内输入 //*, 按Tab键 【全局】

  • Live Server 快速启动一个本地服务器 【全局】

以下插件为：可选以及不推介安装。
以下插件 要么会导致VS体验变差，甚至快捷键冲突，如果没有相关需求，不再建议安装。

    • Sublime Text Keymap 启动sublimeText的快捷键配置 (学着去适应Vscode的快捷键)
    • Visual Studio IntelliCode 支持 AI for Python,Ts/Js /Java 语法。(此插件主要用于AI开发，因此支持Node。安装之后，在Js代码书写中会给出AI提示。不进行AI开发的人员，无需安装)

 

 

 

setting.json 设置

{
  //使用Fira Code字体
  "editor.fontFamily": "Fira Code Light, Consolas, Microsoft YaHei",
  //开启连体字
  "editor.fontLigatures": true,
  // 当一行的字符超过400个，进行换行
  "editor.wordWrapColumn": 400,
  //字体大小
  "editor.fontSize": 15,
  // 主题
  "workbench.iconTheme": "material-icon-theme",
  // 是否显示可能用到的示例代码.安装插件过多，建议选项也会非常多
  "editor.quickSuggestions": {
    "other": true,
    "comments": true,
    "strings": false
  },
  // 粘贴的内容, 是否自动格式化
  "editor.formatOnPaste": false,
  // 保存文件时，则自动格式化 （注意：如果此条规则开启，那么 { codeActionsOnSave source.fixAll }则应该设置为关闭，否则在文件保存时，会被自动格式化两次,没有必要）
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.organizeImport": true,
    "source.fixAll": false, // 对所有文件，保存时自动格式化
    "source.fixAll.eslint": false, // 定制. 也可以在文件保存时，禁用eslint规则生效
    "source.fixAll.tslint": false,
    "source.fixAll.stylelint": false
  },
  // css2rem插件: 书写css时，px单位自动提示转换为rem单位
  // 此处根字体大小设置为100（默认为16）
  "cssrem.rootFontSize": 100,
  "[html]": {
    // 对html文件，使用 vscode.html-language-features(HTML语言功能) 进行格式化
    "editor.defaultFormatter": "vscode.html-language-features"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[less]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    // 对json文件，使用 JSON语言功能 进行格式化
    "editor.defaultFormatter": "vscode.json-language-features"
  },
  "breadcrumbs.enabled": true, // 启用/禁用顶部面包屑导航（可以直接跳转文件）
  // vscode已经内置了emmet。配置emmet是否启用tab展开缩写
  // 这一设置最大作用是：当输入的文本不属于Emmet定义的缩写规则时，依然允许使用Tab键进行缩进。此时会提示我自定义的缩写语句，以及各插件自定义的缩写语句.
  "emmet.triggerExpansionOnTab": true,
  // "emmet.showSuggestionsAsSnippets": true, // 是否启用emmet代码提示
  "eslint.validate": [
    // eslint规则对以下几种后缀文件生效
    "javascript",
    "javascriptreact",
    "html",
    "typescript",
    "typescriptreact"
  ],
  "[typescript]": {
    // 对ts文件进行格式化时，使用哪一种风格 (此处使用的是vscode中安装的ts插件默认风格进行格式化)
    "editor.defaultFormatter": "vscode.typescript-language-features"
  },
  "git.autofetch": true, // 在push代码时，是否先自动从远端拉取代码
  "gitlens.advanced.messages": {
    // 配置gitlen中git提交历史记录的信息显示情况
    "suppressCommitHasNoPreviousCommitWarning": false,
    "suppressCommitNotFoundWarning": false,
    "suppressFileNotUnderSourceControlWarning": false,
    "suppressGitVersionWarning": false,
    "suppressLineUncommittedWarning": false,
    "suppressNoRepositoryWarning": false,
    "suppressResultsExplorerNotice": false,
    "suppressShowKeyBindingsNotice": true,
    "suppressUpdateNotice": true,
    "suppressWelcomeNotice": false
  },
  "[dart]": {
    // 保存文件时，是否自动格式化代码，
    "editor.formatOnSave": true,
    // 当你输入特定字符时，是否自动格式化代码，(比如输入 `;` 和 `}`).
    "editor.formatOnType": true,
    // 在80个字符处画一条引导线，这个范围内的dart代码将被格式化。
    "editor.rulers": [
      80
    ],
    // 禁用与所选内容匹配的单词的内置突出显示。如果不这样做，所选文本的所有实例都将突出显示，从而影响Dart突出显示所选变量的精确引用的能力。
    // "editor.selectionHighlight": false,
    // 默认情况下，当处于“代码片段模式”（在插入的代码中编辑占位符）时，VS会防止snippets弹出打开。
    // 如果设置为“false”，则表示允许完成操作打开，就像不在代码段占位符中
    // "editor.suggest.snippetsPreventQuickSuggestions": true,
    // coding时，VScode会给我们给多提示，在所有的提示选项中会默认选中第一个，这一配置就是表示默认选中哪一项。
    // 默认值为："first"，表示VScode将总是选中第一项
    // （推介） "recentlyUsed" 表示vs code将从代码提示中，预先选中最近使用过的项，
    "editor.suggestSelection": "recentlyUsedByPrefix",
    // 允许使用按<tab>速写代码片段，例如，输入“for”时，即使完成列表不可见。
    "editor.tabCompletion": "onlySnippets",
    // 默认情况下，当前的语言没有代码片段提示时，VS Code将使用当前文件中的你自己写过的单词来显示代码片段提示。
    // 这导致代码完成在编辑注释和字符串时建议单词。 此设置将阻止这种情况
    // 对于dart来说最好关闭，对于html和css建议开启
    "editor.wordBasedSuggestions": false,
    // 在文件底部添加新代码行时，强制所有文件都有一行空格。
    "files.insertFinalNewline": true
  },
  "[jsonc]": {
    "editor.defaultFormatter": "vscode.json-language-features"
  },
  "editor.suggestSelection": "first",
  "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
  "typescript.updateImportsOnFileMove.enabled": "always"
}
posted @ 2020-10-18 04:43  youliCC  阅读(236)  评论(0)  编辑  收藏  举报