K 的博客

记录精彩的程序人生 开始使用

VSCode 安装配置

VSCodea 安装

选择自己需要的版本,我这里选择的 windows zip VSCode 下载地址

imagepng
解压到安装路径
imagepng
运行 Code.exe 直接进入 VSCode

VSCode 安装常用插件

点击插件,输入插件名称 然后安装
imagepng

插件列表

选择自己需要的插件进行安装, 请确认已经安装好 Node.js npmNODE 安装

| 名称 | 简述 |
| -------- | -------- |
| Auto Close Tag | 自动闭合 HTML 标签 |
| Auto Import | Typescript 自动 import 提示 |
| Auto Rename Tag | 修改 HTML 标签时,自动修改匹配的标签 |
| Beautify css/sass/scss/less | css/sass/less 格式化 |
| Better Align | 对齐赋值符号和注释 |
| Better Comments | 编写更加人性化的注释 |
| Bookmarks | 添加行书签 |
| Bracket Pair Colorizer | 用不同颜色高亮显示匹配的括号 |
| Can I Use | HTML5、CSS3、SVG 的浏览器兼容性检查 |
| Code Runner | 运行选中代码段(支持大量语言,包括 Node) |
| Code Spellchecker | 单词拼写检查 |
| CodeBing | 在 VSCode 中弹出浏览器并搜索,可编辑搜索引擎 |
| Color Highlight | 颜色值在代码中高亮显示 |
| Color Info | 小窗口显示颜色值,rgb,hsl,cmyk,hex 等等 |
| Color Picker | 拾色器 |
| Dash | 集成 Dash |
| Debugger for Chrome | 调试 Chrome |
| Document This | 注释文档生成 |
| ESLint | ESLint 插件,高亮提示 |
| EditorConfig for VS Code | EditorConfig 插件 |
| Emoji | 在代码中输入 emoji |
| File Peek | 根据路径字符串,快速定位到文件 |
| Font-awesome codes for html | FontAwesome 提示代码段 |
| Git Blame | 在状态栏显示当前行的 Git 信息 |
| Git History(git log) | 查看 git log |
| GitLens | 显示文件最近的 commit 和作者,显示当前行 commit 信息 |
| Guides | 高亮缩进基准线 |
| Gulp Snippets | Gulp 代码段 |
| HTML CSS Class Completion | CSS class 提示 |
| HTML CSS Support | css 提示(支持 vue) |
| HTMLHint | HTML 格式提示 |
| htmltagwrap | 包裹 HTML |
| Import Cost | 行内显示导入(import/require)的包的大小 |
| Indenticator | 缩进高亮 |
| IntelliSense for css class names | css class 输入提示 |
| JavaScript (ES6) code snippets | ES6 语法代码段 |
| JavaScript Standard Style | Standard 风格 |
| JSON to TS | JSON 结构转化为 typescript 的 interface |
| JSON Tools | 格式化和压缩 JSON |
| Less IntelliSense | less 变量与混合提示 |
| Lodash | Lodash 代码段 |
| Log Wrapper | 生产打印选中变量的代码 |
| MochaSnippets | Mocha 代码段 |
| Node modules resolve | 快速导航到 Node 模块 |
| Code Outline | 展示代码结构树 |
| Output Colorizer | 彩色输出信息 |
| Partial Diff | 对比两段代码或文件 |
| Path Autocomplete | 路径完成提示 |
| Path Intellisense | 另一个路径完成提示 |
| PostCss Sorting | css 排序 |
| Prettify JSON | 格式化 JSON |
| Project Manager | 快速切换项目 |
| Quokka.js | 不需要手动运行,行内显示变量结果 |
| REST Client | 发送 REST 风格的 HTTP 请求 |
| React Native Storybooks | storybook 预览插件,支持 react |
| React Playground | 为编辑器提供一个 react 组件运行环境,方便调试 |
| React Standard Style code snippets | react standar 风格代码块 |
| Sass | sass 插件 |
| Settings Sync | VSCode 设置同步到 Gist |
| Sort Typescript Imports | typescript 的 import 排序 |
| Sort lines | 排序选中行 |
| String Manipulation | 字符串转换处理(驼峰、大写开头、下划线等等) |
| SVG Viewer | SVG 查看器 |
| Syncing | vscode 设置同步到 gist |
| TODO Parser | Todo 管理 |
| TS/JS postfix completion | ts/js 后缀提示 |
| TSLint | TypeScript 语法检查 |
| Test Spec Generator | 测试用例生成(支持 chai、should、jasmine) |
| TypeScript Import | TS 自动 import |
| TypeSearch | TS 声明文件搜索 |
| Types auto installer | 自动安装 @types 声明依赖 |
| VSCode Great Icons | 文件图标拓展 |
| Version Lens | package.json 文件显示模块当前版本和最新版本 |
| View Node Package | 快速打开选中模块的主页和代码仓库 |
| VueHelper | Vue2 代码段(包括 Vue2 api、vue-router2、vuex2) |
| filesize | 状态栏显示当前文件大小 |
| ftp-sync | 同步文件到 ftp |
| gitignore | .gitignore 文件语法 |
| htmltagwrap | 快捷包裹 html 标签 |
| language-stylus | Stylus 语法高亮和提示 |
| markdownlint | Markdown 格式提示 |
| npm Intellisense | 导入模块时,提示已安装模块名称 |
| npm | 运行 npm 命令 |
| stylelint | css/sass/less 代码风格 |
| vetur | 目前比较好的 Vue 语法高亮 |
| vscode-database | 操作数据库,支持 mysql 和 postgres |
| vscode-icons | 文件图标,方便定位文件 |
| vscode-random | 随机字符串生成器 |
| vscode-spotify | 集成 spotify,播放音乐 |
| vscode-styled-components | styled-components 高亮支持 |
| vscode-styled-jsx | styled-jsx 高亮支持 |

附录:个人的 VSCode 首选项配置(仅供参考)此处转载原文地址

{

    "editor.tabSize": 2,
    "files.associations": {
        "*.vue": "vue"
    },
    "eslint.autoFixOnSave": true,
    "eslint.options": {
        "extensions": [".js", ".vue"]
    },
    "eslint.validate": ["javascript", "javascriptreact", "vue", "vue-html"],
    "search.exclude": {
        "**/node_modules": true,
        "**/bower_components": true,
        "**/dist": true
    },
    "emmet.syntaxProfiles": {
        "javascript": "jsx",
        "vue": "html",
        "vue-html": "html"
    },
    "git.confirmSync": false,
    "window.zoomLevel": 0,
    "vsicons.projectDetection.autoReload": true,
    "typescript.check.tscVersion": false,
    "editor.renderWhitespace": "boundary",
    "editor.cursorBlinking": "smooth",
    "workbench.colorTheme": "Solarized Light",
    "workbench.iconTheme": "vscode-great-icons",
    "editor.minimap.enabled": true,
    "editor.minimap.renderCharacters": false,
    "tslint.autoFixOnSave": true,
    "editor.fontFamily": "'Droid Sans Mono', 'Courier New', monospace, 'Droid Sans Fallback'",
    "beautify.tabSize": 2,
    "window.title": "${dirty}${activeEditorMedium}${separator}${rootName}",
    "typescript.extension.sortImports.maxNamedImportsInSingleLine": 5,
    "typescript.extension.sortImports.omitSemicolon": true,
    "editor.codeLens": true,
    "editor.snippetSuggestions": "top",
    "react-native-storybooks.port": 6006
}
评论
留下你的脚步
推荐阅读