vscode插件

发表于 | 更新于:

备忘一下Visual Studio Code经常使用的插件，便于日后食用。

vscode安装

在Windows系统下，通过官方链接地址下载相应的版本。一路默认安装，注意在点击下一步的时候，是否勾选配置环境变量，默认勾选。

vscode插件

顺序按A-Z排。比较好用的插件加粗显示。扩展高亮智能提示插件自行选择。

  • any-rule: 常用正则
  • Auto Rename Tag : 自动更换html的对应标签
  • Auto Close Tag : 自动闭合标签（存在有一定的小问题）
  • Autoprefixer : css自动补全兼容写法，一般 F1 键，指令Autoprefixer CSS
  • Beautify : 格式化文件，一般 F1 键，指令Beautify file
  • Better Comments : 编写更加人性化的注释
  • Bracket Pair Colorizer : 用颜色标识匹配的括号(编辑器已内置)
  • Bootstrap 3 Snippets : Bootstrap 3扩展智能提示
  • Chinese (Simplified) Language Pack for Visual Studio Code : 1.23版本之后，语言需要通过包的方式安装。（2018/5/4补充）
  • Code Spell Checker : 单词拼写检查
  • Debugger for Chrome : 静态文件chrome调试(已内置)
  • Document This : 注释文档自动生成
  • DotENV : .env文件高亮
  • Dracula Theme : 主题
  • EditorConfig for VS Code : .editorconfig的支持插件。
  • ESLint : 静态代码检查
  • filesize : 在底部状态栏显示当前文件大小，点击后还可以看到详细创建、修改时间
  • Git History : git历史
  • GitLens : git日志插件
  • HTML CSS Support : html标签上智能提示当前项目所支持的样式class和scss名
  • HTML Snippets : HTML5代码片段以及提示
  • HTMLHint : html代码检测
  • IntelliSense for CSS class names in HTML : html标签上智能提示当前项目所支持的样式class名
  • JavaScript Atom Grammar : 扩展vscode代码中的js语法替换Atom编辑器中的js语法
  • Import Cost : 成本提示
  • jQuery Code Snippets : jQuery扩展智能提示
  • JS JSX Snippets : JS,JSX,TS扩展智能提示
  • Live Server : 起本地服务，右键菜单
  • markdownlint : markdown语法检测
  • npm : npm指令扩展
  • npm intellisense : 提示npm模块引用
  • OneDark-Pro : 比较喜欢的主题
  • Path Autocomplete : 路径补全
  • Path Intellisense : 文件路径智能提示
  • Project Manager : 多个项目快速切换
  • REST Client : 功能类似postman，但更强大
  • Sass : Sass高亮，自动补全，智能提示
  • Settings Sync VSCode : 设置同步到Gist(可同步插件，用户配置项。)
  • StandardJS - JavaScript Standard Style : 代码格式StandardJS
  • Sublime Babel : babel语法高亮，智能提示
  • Vetur : vue语法高亮，注释，扩展等
  • View In Browser : files协议打开文件在浏览器
  • vscode-fileheader : 顶部注释模板
  • vscode-icons : icons图标
  • Vue 2 Snippets : vue2扩展智能提示
  • VueHelper : snippets for Vue,Vue-router
  • x-translator : 一键翻译、命名规则、替换。

不务正业类

  • vsinder: 类似约会应用程序，左划右划在上面刷代码
  • 小霸王: 童年的回忆，游戏插件
  • VSC Netease Music: 网易云音乐插件
  • vscode-background: 背景插件
  • z-reader: 小说阅读插件,支持在线搜索和本地阅读,支持 txt 和 epub 格式
  • 韭菜盒子: 股票 & 基金 & 期货实时数据，做最好用的投资插件
  • LeetCode: 在 VS Code 中练习 LeetCode
  • Qwerty Learner: 单词记忆与英语肌肉记忆锻炼软件

Eslint配置

VSCode 扩展设置，依次点击 文件 > 首选项 > 设置 打开 VSCode 配置文件,添加如下配置，这样
每次保存的时候就可以根据根目录下.eslintrc.js你配置的eslint规则来检查和做一些简单的fix。

1
2
3
4
5
6
7
8
9
"eslint.validate": [
        "javascript",
        "javascriptreact",
        "html",
        { "language": "vue", "autoFix": true }
    ],
    "eslint.options": {
        "plugins": ["html"]
    }

检查插件定位问题(2024.01更新)

在安装很多插件的之后，很小几率会出现编辑器报错的情况（例如编辑器更新，导致之前装的某款插件有问题，但是ts初始化一直失败），这时候需要定位到底哪款插件导致。

理想情况下是，最新安装更新的插件禁用可以复现问题。
不确定是什么插件的时候，需要打开控制台，即按F1，输入Help: Start extension bisect，插件会通过二分禁用的方式，重启n次，观察是否复现来确定是那款。

------本文结束 感谢阅读------