vscode最佳配置

最近更新时间： 2021.02.12 （Vscode v1.53.2）


vscode 配置文件内容在最后，可直接copy使用

配置详解

editor是针对vscode的风格设置

例如 tabSize：一个tab等于2个空格，行高为24px


workbench是针对vscode的主题设置

例如 iconTheme（ 图标风格）：使用插件 vscode-great-icons （需搜索安装）


search.exclude 配置vscode中项目中的哪些地方被排除搜索,避免你每次搜索结果中都有一大堆无关内容


files.associations 配置文件关联 :

任何 vue 后缀的文件会被认为是 html 文件 ，(查看编辑器右下角) 然后 vscode 会用 html 规则匹配 vue 文件做相应格式化，代码提示等。


任何 wxss 后缀的文件被认为是 css 文件 ，然后 vscode 会用 css 规则匹配 wxss 文件，对 css 的属性排序，rem 自动转换，格式化等


	 "files.associations": {
	        "*.vue": "html",
	        "*.wxss": "css"
	  }


sync是用于同步vscode配置使用，不用每一次换个电脑都要复制一次配置，避免丢失或者改动，保持一致！收藏文章/复制粘贴最好。会持续更新


apicloud 是用于同步 vscode 开发apicloud程序时进行手机wifi真机同步使用，不用数据线即可进行PC修改代码，真机调试。


vetur 和prettier以及stylus是用于vue开发时的代码格式化, 代码提示.


filesize在底部状态栏左侧，显示当前文件大小，没啥用


Live Server快速启动本地服务器，注意只对.html和.htm文件有效。对html文件点击鼠标右键，选择open with Live Server.


屏幕阅读器优化, 可选项. 此功能是 vscode 专门配合盲人阅读器而做的贴心选项，对于程序员来说也有一定作用( 哈哈哈, 可以纠正中式英文发音)

例如：当你开启后，鼠标悬浮在桌面任何位置，语音朗读器都会朗读出来所在位置的内容。一旦在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 中文语言包

水桶套装！直接安装全部插件，插件互不干扰。
vscode插件列表中, Ctrl + 鼠标左键 + 点击标题 可以弹出对应官方介绍


Auto Rename Tag -  自动重命名配对的HTML / XML标记    【全局】


Bookmarks  对代码片段添加书签，便于跳转   【全局】


Code Runner  node，python等代码不必开命令行即可运行  【全局】


Image preview  图片预览  【全局】


Color Highlight  颜色高亮  【全局】


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代码  【全局】


Vetur 快速书写Vue代码  【vue文件】


Vue 2 Snippets  快速新建一个vue页面（参考文章） 【全局】


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文件】


React Native Tools  支持React Native项目，快速书写 es6 及 jsx 【js文件】


C/C++  运行React Native项目时，有些文件的查看需要这个  【全局】


Python tab与空格的痛苦，写过python的都知道 【py文件】


XML Tools XML文件格式化以及高亮 【xml文件】


Flutter   Flutter 2.0诞生，已入坑  【dart文件】


Awesome Flutter Snippets flutter 代码片段速写	 【dart文件】


Built Value Snippets  配合Built Value快速生成dart模型   【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键 【全局】


REST Client 类似 postman ，直接在 VScode 中模拟发送http请求，调试极佳 【全局】


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


以下插件为：可选以及不推介安装。

以下插件 要么会导致VS体验变差，要么会导致快捷键冲突，如果没有相关需求，不再建议安装。

Sublime Text Keymap  启动sublimeText的快捷键配置 (sublimeText的老用户学着去适应Vscode的快捷键吧)
Visual Studio IntelliCode 支持 AI for Python,Ts/Js /Java 语法。(此插件主要用于AI开发，因此支持Node。安装之后，在Js代码书写中会给出AI提示。不进行AI开发的人员，无需安装)
Settings Sync  用于同步vscode配置，多台电脑一份配置（配置复杂，没什么必要）
{
  // VScode主题配置
  "editor.tabSize": 2,
  "editor.lineHeight": 24,
  "editor.renderLineHighlight": "none",
  "editor.renderWhitespace": "none",
  "editor.fontFamily": "Consolas",
  "editor.fontSize": 15,
  "editor.cursorBlinking": "smooth",
  "editor.multiCursorModifier": "ctrlCmd",
  "editor.wordWrap": "off", // 永不换行
  "editor.wordWrapColumn": 400,
  "editor.linkedEditing": true,
  "explorer.confirmDelete": false,
  "workbench.startupEditor": "newUntitledFile",
  "workbench.iconTheme": "material-icon-theme",
  "workbench.colorTheme": "Dracula Soft",
  "workbench.colorCustomizations": {
    "editorIndentGuide.activeBackground": "#ff0000" // 设置guide线高亮颜色,可以改为自己喜欢的颜色
  },
  // 代码提示显示位置，控制自定义代码片段所处位置。许多插件都有snippet代码提示功能，top表示自定义片段会优先显示在最上方
  "editor.snippetSuggestions": "top", 
  // 代码提示默认选中项。coding时，VScode会给出很多提示，在所有的提示选项中会默认选中一个，这一配置就是表示默认选中哪一项。
  // 此项配置十分精妙，自己改改探索一下。
  // "first"：VScode将总是选中第一项
  // "recentlyUsed"：（默认值）vscode将从代码提示中，预先选中最近使用过的项
  // "recentlyUsedByPrefix"： （推介）vscode将从所有可用代码提示片段中，预先选中最近使用过的项，支持联想功能
  "editor.suggestSelection": "first",
  "editor.quickSuggestions": {
    // 是否显示可能用到的示例代码.安装插件过多，建议选项也会非常多
    "other": true,
    "comments": true,
    "strings": false
  },
  "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
  // css2rem插件: 书写css时，px单位自动提示转换为rem单位
  // 此处根字体大小设置为100（默认为16）, 注意与你项目中rem数值保持一致
  "cssrem.rootFontSize": 100,
  // 推介终端启动快捷键:  ctrl + shift + C
  // 设置默认终端，比如我用到了 cmder，那么可以把这里的地址改为电脑cmder的安装位置
  "terminal.external.windowsExec": "C:\\software\\cmder\\Cmder.exe",
  // 设置VScode内置终端。通常改为自己电脑中git安装位置
  // 内置终端启动快捷键： ctrl + shift + `
  "terminal.integrated.shell.windows": "C:\\software\\Git\\git-bash.exe",
  "workbench.editor.limit.enabled": true, // 是否限制每一个VSCODE窗体内显示的编辑器窗体数量（默认为关闭）。
  "workbench.editor.limit.perEditorGroup": true, // 是对打开的所有VSCODE窗体进行限制还是只对当前VSCODE窗体限制
  "workbench.editor.limit.value": 8, // 打开的编辑器的最大数量（默认为10，超出数量会自动关闭）
  "javascript.updateImportsOnFileMove.enabled": "always", // 移动文件或者修改文件名时，是否自动更新引用了此文件的所有文件。
  "[json]": {
    // 对json文件，使用 JSON语言功能 进行格式化
    "editor.defaultFormatter": "vscode.json-language-features"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "vscode.json-language-features"
  },
  "[html]": {
    // 对html文件，使用 vscode.html-language-features(vscode内置规则) 进行格式化,不要使用 prettier
    "editor.defaultFormatter": "vscode.html-language-features"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[less]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[vue]": {
    // 可选值： eslint ："dbaeumer.vscode-eslint"  vetur: "octref.vetur"   prettier: "esbenp.prettier-vscode"
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[markdown]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    // 对ts文件进行格式化时，使用哪一种风格 (此处使用的是vscode中安装的ts插件默认风格进行格式化)
    "editor.defaultFormatter": "vscode.typescript-language-features"
  },
  "breadcrumbs.enabled": true, // 启用/禁用顶部面包屑导航（可以直接跳转文件）
  "open-in-browser.default": "chrome", // 配置打开html文件的默认浏览器
  "search.exclude": {
    // VScode进行文件搜索时，不搜索这些区域。
    "**/node_modules": true,
    "**/bower_components": true,
    "**/*.code-search": true,
    "**/.DS_Store": true,
    "**/.git": true,
    "**/.gitignore": true,
    "**/.idea": true,
    "**/.svn": true,
    "**/.vscode": true,
    "**/build": true,
    "**/dist": true,
    "**/tmp": true,
    "**/yarn.lock": true,
    "**/assets": true
  },
  // 配置是否在左侧目录列表中显示该文件/文件夹
  "files.exclude": {
    "**/.git": true,
    "**/.svn": true,
    "**/.hg": true,
    "**/CVS": true,
    "**/.DS_Store": true,
  },
  // 配置文件关联
  "files.associations": {
    // 比如小程序中的 .wxss 这种文件，会把它作为css文件来处理，以便相关插件提供对应的css的语法提示，css的格式化等。
    "*.wxss": "css",
    "*.cjson": "jsonc",
    "*.wxs": "javascript",
    "*.ts": "typescript",
    "*.vue": "vue",
    "*.dart": "dart",
    "*.json": "jsonc",
    ".prettierrc": "jsonc"
  },
  // 配置emmet是否启用tab展开缩写
  // vscode已经内置emmet,这一设置最大作用是：当输入的文本不属于Emmet定义的缩写规则时，依然允许使用Tab键进行扩展。此时会提示自定义的缩写语句，以及各插件自定义的缩写语句.
  "emmet.triggerExpansionOnTab": true,
  "emmet.showSuggestionsAsSnippets": true, // 是否将自定义的代码片段作为提示建议显示。
  "emmet.syntaxProfiles": {
    // 配置emmet支持哪些类型的文件
    "vue-html": "html",
    "vue": "html",
    "javascript": "javascriptreact",
    "xml": {
      "attr_quotes": "double"
    }
  },
  "emmet.includeLanguages": {
    "wxml": "html",
    "vue-html": "html",
    "javascript": "javascriptreact",
    "jsx-sublime-babel-tags": "javascriptreact", // 在 react 的jsx中添加对emmet的支持
  },
  // ===================格式化文件================
  // 粘贴后的内容, 是否自动格式化
  "editor.formatOnPaste": false,
  // 格式化快捷键: shirt + alt + F   
  // 自动删除代码中无用的 import 引用,并排序: shift + alt + o
  // 使用 shirt + alt + F 进行格式化时，先执行编辑器的格式化规则，然后执行 eslint 和 tslint 等其他插件格式化规则。
  // vetur - prettier 可用格式化规则配置
  // "vetur.format.defaultFormatterOptions": {
  //   "prettier": {
  //     "printWidth": 130,
  //     "tabWidth": 2,
  //     "useTabs": false,
  //     "singleQuote": false, // 单引号
  //     "semi": true, // 未尾封号
  //     "trailingComma": "none", // es5:object和array最后一个属性后面，是否添加逗号
  //     "proseWrap": "never",
  //     "bracketSpacing": true,
  //     "jsxBracketSameLine": false,
  //     "arrowParens": "always",
  //     "insertPragma": false,
  //     "vueIndentScriptAndStyle": true,
  //     "quoteProps": "as-needed",
  //     "jsxSingleQuote": false, // jsx单引号
  //     "requirePragma": false,
  //     "htmlWhitespaceSensitivity": "strict",
  //     "endOfLine": "lf",
  //   }
  // },
  /// if => 关闭编辑器自带保存格式化功能，此功能会用Vetur进行格式化
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    // 自动对 import 这种符合CommonJS规范语句进行排序，
    // 要使此功能生效，要求使用到星号的语句写在当前文件顶部，例如：import * as Some from "R"
    "source.organizeImport": true,
    // 自动引入缺少的库
    "source.addMissingImports": true,
    /// else => 
    "source.fixAll": true, // 对所有文件，保存时自动格式化
    // "source.fixAll.eslint": false, // 更细. 在文件保存时，eslint规则生效。此配置会影响 eslint.format.enable
    // "source.fixAll.tslint": false, // 更细. 在文件保存时，tslint规则生效。 此配置会影响 typescript.validate.enable
    // "source.fixAll.stylelint": false // 更细. 在文件保存时，stylelint样式规则生效
  },
  // 是否开启 tslint代码规范检测 (与eslint 开启一种即可)
  "typescript.validate.enable": false,
  "eslint.options": {
    // eslint配置文件 ,修改为你自己电脑上的文件位置，或者直接删除
    // 建议统一使用prettier进行配置
    // "configFile": "D:/worksapce/vue-project/.eslintrc.js",
  },
  // eslint规则对以下几种类型文件生效
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "html",
    "typescript",
    "typescriptreact",
    "vue"
  ],
  "git.autofetch": true, // 在push代码时，是否先自动从远端拉取代码
  "git.enableSmartCommit": true,
  "gitlens.advanced.messages": {
    // 配置gitlen中git提交历史记录的信息显示情况
    "suppressCommitHasNoPreviousCommitWarning": false,
    "suppressCommitNotFoundWarning": false,
    "suppressFileNotUnderSourceControlWarning": false,
    "suppressGitVersionWarning": false,
    "suppressLineUncommittedWarning": false,
    "suppressNoRepositoryWarning": false
  },
  "debug.openDebug": "openOnDebugBreak", // 断点调试时，遇到断点，自动显示调试视图。（全局，不可为每种语言单独配置）
  /// **python开发专用配置** 
  "python.linting.enabled": false, // 是否格式化python文件
  "minapp-vscode.disableAutoConfig": true,
  /// **apicloud开发专用配置** 。
  "apicloud.port": "23450", // 设置apicloud在vscode中的wifi真机同步时的端口
  "apicloud.subdirectories": "/apicloudproject", // 设置apicloud在vscode中的wifi真机同步根目录，默认可不设置
  /// **dart语言专用配置**
  "dart.checkForSdkUpdates": false,
  "dart.previewLsp": true,
  "dart.warnWhenEditingFilesOutsideWorkspace": true,
  "dart.openDevTools": "flutter",
  "dart.enableCompletionCommitCharacters": true,
  "dart.flutterHotRestartOnSave": true,
  "dart.lineLength": 120,
  "dart.previewFlutterUiGuides": true,
  "dart.triggerSignatureHelpAutomatically": true,
  "dart.debugExternalLibraries": true,
  "dart.debugSdkLibraries": true,
  "[dart]": {
    // 保存文件时，是否自动格式化代码，
    "editor.formatOnSave": true,
    // 当你输入特定字符时，是否自动格式化代码，(比如输入 `;` 和 `}`).
    "editor.formatOnType": true,
    // 在120个字符处画一条引导线，这个范围内的dart代码将被格式化。
    "editor.rulers": [
      120
    ],
    // 禁用与所选内容匹配的单词的内置突出显示。如果不这样做，所选文本的所有实例都将突出显示，从而影响Dart突出显示所选变量的精确引用的能力。
    "editor.selectionHighlight": false,
    // 默认情况下，当处于“代码片段模式”（在插入的代码中编辑占位符）时，VS会防止snippets弹出打开。
    // 如果设置为“false”，则表示允许完成操作打开，就像不在代码段占位符中
    "editor.suggest.snippetsPreventQuickSuggestions": true,
    "editor.suggestSelection": "recentlyUsedByPrefix",
    // 允许使用按<tab>速写代码片段，例如，输入“for”时，即使完成列表不可见。
    "editor.tabCompletion": "onlySnippets",
    // 默认情况下，当前的语言没有代码片段提示时，VS Code将使用当前文件中的你自己写过的单词来显示代码片段提示。
    // 这导致代码完成在编辑注释和字符串时建议单词。 此设置将阻止这种情况
    // 对于dart来说最好关闭，对于html和css建议开启
    "editor.wordBasedSuggestions": false,
    // 在文件底部添加新代码行时，强制所有文件都有一行空格。
    "files.insertFinalNewline": true
  },
  /// **java语言专用配置**
  // 由于我本机java版本为 Java1.8 , vscode内置的vscode-java依赖于openJDK 并且要求版本大于等于 11，所以总是会弹出一个报错窗口。
  // https://github.com/redhat-developer/vscode-java/wiki/JDK-Requirements#java.configuration.runtimes，解决办法如下
  // 1. 下载 openJDK11 并安装，下载地址：https://adoptopenjdk.net/
  // 2. 配置 java.home 为刚刚安装的 openJDK11 的位置
  // 3. 由于我只希望在Vcode中使用JDK11版本，在实际项目中的配置不变，所以配置 java.configuration.runtimes
  "java.home": "C:/Program Files/JavaAdoptOpenJDK/jdk-11.0.8.10-hotspot",
  "java.configuration.runtimes": [
    {
      "name": "JavaSE-1.8",
      "path": "C:/Program Files/Java/jdk1.8.0_211",
    },
    {
      "name": "JavaSE-11",
      "path": "C:/Program Files/JavaAdoptOpenJDK/jdk-11.0.8.10-hotspot",
      "default": true
    },
  ],
  // 多行注释合并
  "commentTranslate.multiLineMerge": true,
  // 注释采用简洁模式
  "commentTranslate.concise": true,
  // VScode更新后，是否显示版本changeLog
  "versionlens.suggestions.showPrereleasesOnStartup": true,
  "liveServer.settings.donotShowInfoMsg": true,
  "vetur.ignoreProjectWarning": true
}

其他功能
1. 使用vscode添加自定义snippets

当你写代码时，时常用的代码片段，使用此方法定义，会飞速提高你的编码效率，以下以添加注释信息为例（可以添加任意代码片段）


文件 >> 首选项  >> 用户片段 >> 新建全局代码片段 >> 输入命名author，粘贴保存。
测试方法：新建一个文件，输入author，按回车键


{
	"用户信息": {
		// prefix: 在编辑器中输入的此内容时，在编辑器建议中会显示该片段。
		"prefix": "author",
		// TM_FILENAME_BASE : 当前文件名
		// CURRENT_YEAR ： 年（4位数）  CURRENT_YEAR_SHORT：年（2位数）  CURRENT_MONTH：月  CURRENT_DATE：日 
		// CURRENT_HOUR ：小时  CURRENT_MINUTE ：分钟 CURRENT_SECOND：秒
		"body": [
			"/**",
			" * * 描述信息.作者是谁",
			" * ! author: ifredom",
			" * ? description: ifredom是一位FD.",
			" * @param ${TM_FILENAME_BASE}",
			" * TODO: since: 创建时间  ${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE} ${CURRENT_HOUR}:${CURRENT_MINUTE}:${CURRENT_SECOND}",
			" **/",
			""
		],
		// 描述说明，在片段说明中会显示此字段的文本内容。
		"description": "自定义代码片段.注释用户信息"
	}
}

2. Screen Reader（屏幕阅读器）
支持windows7以上操作系统，不支持mac，作为练习英语听力的小玩具.

首先下载并安装软件，Nvda, 需要的pass:  he2m

安装完成此软件后启动。在vscode中配置项editor.quickSuggestions决定是否开启.

3. vue项目，格式化规范 .eslintrc.js

vscode中使用eslint 和prettier进行格式化(可以无缝衔接setting.json配置)

4. react项目额外配置

react项目（使用 npx create-react-app my-app 创建），有时会发现eslint检验规则不生效，此时在当前项目，需要额外安装2个插件。


npm install --save-dev eslint-plugin-html  eslint-plugin-react
要么删除此项配置，要么配置为你自己的校验规则地址

  "eslint.options": {
    "configFile": "D:/worksapce/my-app/.eslintrc.js",
  }

5. 插件快捷键冲突问题

插件安装过多时，不可避免会出现快捷键冲突。为了解决冲突，需要打开快捷键清单，根据插件名称搜索对应插件快捷键，比如我输入: emmet, 对准任意一条快捷键选项，点击鼠标右键，选择显示相同的按键绑定,修改为自己喜欢的快捷键即可。（建议仅对冲突的进行更改）

文件 --> 首选项 --> 键盘快捷方式
vscode配置历史版本
------ 如果文章对你有用，感谢右上角 >>>点赞 | 收藏 <<<

不同于传统阿拉伯数字时钟，冷高轮时间数字用人体呈现出一个不同视觉显示，来提醒我们时间的逝去。第一步：1.登陆地址 2.选择下载下载到桌面后打开文件夹，将喜欢的时钟拖拽到桌面。两种呼出屏保方法1.双击鼠标左键可以直接呼出屏保。2点击鼠标右键选择安装屏保后可以设置为系统预设时间到达自动呼出屏幕保护。屏保模式下晃动鼠标即可返回主屏幕。支持系统：xp，win7 win8 win10 以及安装.net的windows系统(win7以上绝大多数已经预装.net了无需自行此项操作).苹果MAC电脑刷双系统可用。
注;绝大多数电脑已经预装.net插件，如果没有.net双击无法呼出屏幕保护，会自动弹出.net安装提示如下图。如果没有上图的弹出提示自行搜索下载.net插件即可。
右键安装系统预设时间后自动弹出屏保步骤：
1.选择时钟样式 2.选择在无触屏键盘鼠标情况下预设呼出屏保的时间 3.设置 4.应用（此时屏保设置已经生成）。最后别忘记点击确定哦’

Unity 简单易用的插件汇总 
2dToolKit，是一款2D开发组件，它具有很强的灵活性，可以让开发者在Unity中进行2D开发
PlayerMaker，是一个可视化脚本工具，开发者可以使用它很快的完成游戏原型制作，能够大大的提高开发效率，让你的游戏更加完美 
FingerGestures，顾名思义，这个是支持移动设备所有触摸事件的插件，包括点击，滑动，还有自定义手势等等 
PathologicalGames，用于绝大多数的曲线操作
water.unitypackage，这是一款用于水的插件，性能还比较高，用于移动设备也没问题，弥补了专业版的unity水特效资源在移动设备卡机的不足
icsharpcode-SharpZipLib，用于解压缩，
ZipLib组件与.net自带的Copression比较，在压缩方面更胜一筹，经过BZip2压缩要小很多，而且这个功能更加强大
unity-lzma，也是一款用于压缩和解压文件的库，它是一个开源的类库，有C、  C++、C#、JAVA的类库，Unity里面我们自然要使用C#的类库 
gamedraw：可以制作模型，编辑模型，uv展开等等，无需切换到其他3d软件。 ship game starter
kit：制作各种船类游戏 ez replay manager：帮助播你录下任何u3d游戏，重新播放，甚至以更快的速度
BrainBuilder编写游戏无需代码.unitypackage poolmanager：游戏性能优化插件 Car Physics
汽车物理引擎包 Unity Shooter Engine  （Unity3D）U.S.E.射击游戏引擎 V1.7
AStarPathFinding 寻路 插件
EasyTought 触摸 摇杆 
NGUI  UI界面 
NGUI HUB 血条 屏幕上出现+10类的动画数字
ITWEEN  DOTWEEN 动画插件，性能压力小，链式写法很爽快
Easy MoveTextrue  播放视频 
FX Makeer 侧重于unity里的粒子特效系统，这款插件提供了众多特效资源和效果预览，玩家可以随意组装效果并最终合成一个预设自己使用
TextMeshPro 字体锐利而且各种描边、阴影效果不费
I2 多语言解决方案 （在插件基础上我们做了一套直接读取外部csv更新的修改，方便翻译）
UniWebView 内嵌网页
LogViewer 在真机上直接显示
Dynamic Shadow Projector影子的一套解决方案

目录

使用方法

1. 引入jQuery和Tooltipster's文件

2. 设置你的HTML

3. 激活 Tooltipster

4. 定义你的tooltips风格

5. 在HTML内使用你的tooltips

6. 使用插件

附录：参数

插件描述：Tooltipster是一个jQuery提示框插件，用于对HTML元素的拖动、移入、点击等鼠标事件或其他键盘事件弹出效果炫酷的提示框。有助于丰富系统的提示功能。这是一个简单的且多才多艺的插件。

官网：http://down.admin5.com/demo/code_pop/28/72/ 

使用方法

1. 引入jQuery和Tooltipster's文件

你可以 点击这里 下载, 引入 jQuery 和 Tooltipster's CSS 还有 JavaScript 文件到你的页面。

<head>
    <link rel="stylesheet" type="text/css" href="tooltipster/dist/css/tooltipster.bundle.min.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
    <script type="text/javascript" src="tooltipster/dist/js/tooltipster.bundle.min.js"></script>
</head>

 兼容提醒： jQuery 1.7已经足够了,除非你需要SVG兼容IE(需要使用jQuery 1.10+). Tooltipster 不能正常运行在IE9中引用jQuery1.8

2. 设置你的HTML

想让一个元素加入工具提醒, 我们会给他加上一个类名class 'tooltip' . 你也可以选择使用自定义的类名或选择器(请继续往下看), 由你决定。之后, 我们将设置标题title 属性为我们想要的提示. 这里有几个例子:

// 在图片加入工具提醒:
<img src="my-image.png" class="tooltip" title="This is my image's tooltip message!" />
// 在文字加入工具提醒 (span, div or whatever):
<span class="tooltip" title="This is my span's tooltip message!">Some text</span>

注意：如果您使用Twitter's Bootstrap，请使用另一个类名，因为“工具提示”会产生冲突。

3. 激活 Tooltipster

我们要做的最后一件事是激活Tooltipster. 我们需要在头部得问 </head> 标签加入script并激活Tooltipster (你可以选择使用自己定义的选择器 - 我们的栗子是使用 'tooltip' class):

<head>
    ...
    <script>
        $(document).ready(function() {
            $('.tooltip').tooltipster();
        });
    </script>
</head>

4. 定义你的tooltips风格

第一个是默认样式, Tooltipster还为你提供另外五种主题风格.



要使用这些主题,需要引用一个css文件 (他的路径是 dist/css/plugins/tooltipster/sideTip/themes 文件里) 在你的页面并指定其名称在Tooltipster's 选项。

$('.tooltip').tooltipster({
    theme: 'tooltipster-noir' //使用Noir主题
});

你可以通过修改tooltips的样式达到你想要的效果, 自定义主题部分 在下面等着你.

注: "sideTip" 是 Tooltipster默认插件的名称. 我们稍后会看到这个插件.

5. 在HTML内使用你的tooltips

Tooltipster 允许你使用任何HTML标记触发提醒. 这意味着可以插入像图像和文本格式标记之类的东西。.

代替之前加入的title 属性, 这次我们使用 data-tooltip-content 属性来提供与HTML页面内对应的元素选择器,该元素作为内容显示. 栗子如下:

<span class="tooltip" data-tooltip-content="#tooltip_content">This span has a tooltip with HTML when you hover over it!</span>
<div class="tooltip_templates">
    <span id="tooltip_content">
        <img src="myimage.png" /> <strong>This is the content of my tooltip!</strong>
    </span>
</div>

在你的CSS文件, 加入 .tooltip_templates { display: none; } 这样内容不会在工具提示之外显示出来.

重点： 如果你有两个(或以上)的tooltips有相同的 data-tooltip-content 属性 (也就是说, 你想用一样的HTML元素), 请将 contentCloning 选项设置为 true 当你初始化你的tooltips:

$('.tooltip').tooltipster({
    contentCloning: true
});

注: 其实还有其他设置提醒内容的方法.

6. 使用插件

Tooltipster的功能可以通过插件扩展.他们可能会增加新的风格,新的选择,新的方法,新的行为,等等.

Tooltipster的一些流行插件:

sideTip Tooltipster附带的和默认启动的
	
SVG Tooltipster附带的, 增加了 SVG 支持, 但是默认情况是不启动的 (详情见SVG section)
	
follower 让工具提示跟随光标 有空看看这
	
scrollableTip 使工具提示增加滚动条当内容过多. 请看这
	
discovery 创建工具提示组更快显示 ,在分组提示 部分显示, 可以看这
	
selectableText 当你选择/高亮某段文字,让工具提醒显示. 详情见此
 　　以跟随鼠标插件为例：tooltipster-follower  

<script>
  $(document).ready(function() {
    $(".tooltip").tooltipster({
      plugins: ["follower"]
    });
  });
</script>

附录：参数

Tooltipster 的参数(选项)给你一个宽阔的可变范围来调整成你心仪的提醒. 这里教你如何配置参数:

$(".tooltip").tooltipster({
  animation: "fade",
  delay: 200,
  theme: "tooltipster-punk",
  trigger: "click"
});

这里是全部可用参数的列表:

参数
			
可用的值
			
描述
		

			
animation
			
			
'fade',

			'grow',

			'swing',

			'slide',

			'fall'
			
决定tooltips进场的动画. 除了内置的动画, 你也可以创建自定义动画在你的CSS文件. 在IE9及以下, 所有动画默认为javascript生成淡入动画. 默认值: 'fade'
		

			
animationDuration
			
			
integer,

			integer[]
			
设置动画的持续时间, 以毫秒为单位. 如果你想为你的tooltips打开/关闭提供不同的持续时间, 你可以提供一个数组来表示不同的值(如:integer[400,500]). 默认值: 350
		

			
arrow
			
			
boolean
			
给你的tooltips加一个"气泡" 箭头. 默认值: true
		

			
content
			
			
string,

			jQuery object,

			any
			
如果设置了, 将会覆盖tooltips的内容. 如果您提供的内容不是字符串或jQuery封装的HTML元素,你需要使用'functionFormat'这个参数来格式化你的内容以达到显示效果默认值: null
		

			
contentAsHTML
			
			
boolean
			
如果tooltip的内容是字符串, 会默认显示为纯文本. 如果想将内容解析为HTML, 请将这个参数设为true. 默认值: false
		

			
contentCloning
			
			
boolean
			
如果你提供了一个JQ对象给'content'这个参数,如果这个克隆对象应该被使用,则设置此参数.默认值: false
		

			
debug
			
			
boolean
			
当你做了你不应该做的事情,tooltipster日志提醒和通知会在控制台报错,如果你设置了false便可以禁用日志记录默认值: true
		

			
delay
			
			
integer,

			integer[]
			
在鼠标交互的时候,这个属性是在hover/trigger..触发tooltip开始打开或者关闭动画使用时生效(简单来说就是一个延时器)(*). 如果你想为你的tooltips打开/关闭提供不同的持续时间, 你可以提供一个数组来表示不同的值(如:integer[400,500]).默认值: 300
		

			
delayTouch
			
			
integer,

			integer[]
			
在触摸交互的时候, 同上(*).如果你想为你的tooltips打开/关闭提供不同的持续时间, 你可以提供一个数组来表示不同的值(如:integer[400,500]). 默认值: [300, 500]
		

			
distance
			
			
integer,

			integer[]
			
以像素为单位,远点到提醒工具的距离.如果您希望为每个边指定不同的距离，则该值可以是整数或整数数组（通常为CSS语法）。 默认值: 6
		

			
functionInit
			
			
function
			
在实例化时只被触发一次的自定义函数. Arguments. 默认值: none (null)
		

			
functionBefore
			
			
function
			
在打开工具提示之前要触发的自定义函数. 这个发方法会阻止tooltip打开如果返回false.Arguments. 默认值: none (null)
		

			
functionReady
			
			
function
			
当工具提示及其内容被添加到DOM时，将触发自定义函数. Arguments. 默认值: none (null)
		

			
functionAfter
			
			
function
			
一旦工具提示已关闭并从DOM中移除,则将定制一个函数.Arguments. 默认值: none (null)
		

			
functionFormat
			
			
function
			
格式化内容的函数.它得到两个第一个通常的参数和第三个参数的内容。它必须返回在工具提示中显示的值，无论是字符串还是jQuery封装的HTML元素（请参阅格式化部分）. 默认值: none (null)
		

			
functionPosition
			
			
function
			
当tooltip重新定位时触发的自定义函数,它给你轻微或完全修改的位置，Tooltipster是要给tooltip的能力,它将建议的放置值集设置为第三个参数.函数必须返回您可能编辑过的位置值集合（请参阅定位部分）. 默认值: none (null)
		

			
IEmin
			
			
integer
			
要运行的IE的最低版本. 默认值: 6
		

			
interactive
			
			
boolean
			
在工具提醒给用户尽可能多的交互.如果你想他们在工具提醒内容可以点击，填写表格或者其他交互，你就必须把这个参数设置为true.当使用“悬停”关闭触发器时，用户必须在开始关闭之前将光标移到工具提示上（此时间间隔由“delay”参数设置）. 默认值: false
		

			
maxWidth
			
			
integer
			
设置tooltip的最大宽度. 默认值: null (无限制)
		

			
minIntersection
			
			
integer
			
对应于箭头中心和工具提示边缘之间强制执行的最小距离. 主要用于创建大于默认主题的箭头. 默认值: 16
		

			
minWidth
			
			
integer
			
设置tooltip的最小宽度.默认值: 0 (auto width)
		

			
multiple
			
			
boolean
			
允许你把几个提示在一个单一的元素 (详见 multiple 部分). 默认值: false
		

			
plugins
			
			
string[]
			
设置使用Tooltipster的插件名. 默认值: ['sideTip']
		

			
repositionOnScroll
			
			
boolean
			
为了使tooltip尽可能长时间可见,重新定位tooltip如果它在用户滚动页面时退出视窗. 默认值: false
		

			
restoration
			
			
'none',

			'previous',

			'current'
			
指定在调用“销毁”方法后，是否应该在HTML元素上恢复title属性.这个属性可以省略,或是在Tooltipster之前初始化存在的值恢复，或是与字符串化值的当前内容恢复.注意：在多个工具提示的情况下在一个单一的元素，只有最后的破坏可能会触发恢复提示. 默认值: 'none'
		

			
selfDestruction
			
			
boolean
			
在这个原点从DOM移除后，设置这个参数是否将tooltip自毁.这可以防止内存泄露. 默认值: true
		

			
side
			
			
string,

			string[]
			
设置tooltip在哪侧显示. 这个值可能是一个: 'top', 'bottom', 'left', 'right'. 也可以是一个数组包括多个值. 当使用数组时,这些值的顺序要考虑到回退顺序和禁用没有用到的一侧 (see the sides section). 默认值: ['top', 'bottom', 'right', 'left']
		

			
timer
			
			
integer
			
设置这个工具提醒在关闭前的显示时间(以毫秒为单位) 默认值: 0 (disabled)
		

			
theme
			
			
string,

			string[]
			
设置一个将覆盖默认工具提示外观的主题. 你可以提供多个字符串的数组来同时应用多个主题Y(详见 主题部分). 默认值: empty array
		

			
trackerInterval
			
			
integer
			
设置追踪程序持续时间/毫秒(见trackOrigin 和 trackTooltip).当工具提醒被打开,即使trackOrigin和trackTooltip设置为false,追踪器运行会检查起点是否被移除,如非必要,你定的值不能太高或太低. 默认值: 500
		

			
trackOrigin
			
			
boolean
			
如果原点移动或调整大小需要复位提醒.由于此选项可能对性能有影响，我们建议您仅在需要时启用它. 默认值: false
		

			
trackTooltip
			
			
boolean
			
如果tooltip改变大小则重新配置tooltip.当尺寸受到'content'这个方法而改变尺寸，tooltip已经重新定位而不需要这个参数。由于此选项可能对性能有影响，我们建议您仅在需要时启用它。详情进入这个入口 有常见问题解答 默认值: false
		

			
trigger
			
			
'hover',

			'click',

			'custom'
			
设置这个触发条件，有'click','hover',还可以自定义以达到你想要的效果. 见 触发器部分来学习如何使用自定义触发器. 默认值: 'hover'
		

			
triggerClose
			
			
object
			
当你把'trigger'设置为'custom',所有内置关闭触发器都默认不可用，此参数就是允许您激活您所选择的触发器来创建一个定制的行为，只在设置'trigger'为'custom'时有效。 详见触发器部分.
		

			
triggerOpen
			
			
object
			
类似于'triggerClose'(同上).
		

			
updateAnimation
			
			
'fade',

			'rotate',

			'scale',

			null
			
用于打开tooltip后的后续动画设置，你可以创建自己的动画在您的CSS文件内但是要将值设为'null'. 默认值: 'rotate'
		

			
viewportAware
			
			
boolean
			
尝试将tooltip放置在屏幕打开时完全可见的地方,如果工具提示在其源于屏幕之外（使用方法调用）打开时，您可能希望将此选项设置为false。默认值: true
		

			
zIndex
			
			
integer
			
设置tooltip的z-index默认值: 9999999