vscode 插件篇

个人觉得vscode比较好用,列举了一些自己安装的插件

一、格式

  1. Beautify css/sass/scss/less css/sass/less 格式化
  2. Better Align:对齐赋值符号和注释
  3. Better Comments: 编写更人性化的注释
  4. Bracket Pair Colorizer: 让括号拥有独立的颜色,易于区分。可以配合任意主题使用。
  5. Code Spellchecker: 单词拼写检查
  6. CodeBing:在VSCode中弹出浏览器并搜索,可编辑搜索引擎
  7. Color Highlight:颜色值在代码中高亮显示
  8. Document This:注释文档生成
  9. Beautify:格式化代码的工具
  10. change-case:快速更改当前选择或当前单词的情况(camelCase、CONSTANT_CASE、snake_case等)。
  11. Document This: js 的注释模板 (注意:新版的vscode已经原生支持,在function上输入/** tab)
  12. Prettier - Code formatter: 格式代码
  13. Sort lines: 排序
  14. TODO Highlight: TODO高亮显示
  15. vscode-fileheader: 顶部注释模板,可定义作者、时间等信息,并会自动更新最后修改时间

二、html相关

  1. Auto Close Tag: 自动闭合html标签
  2. Auto Rename Tag: 修改html标签时,自动修改匹配的标签
  3. htmltagwrap:包裹HTML
  4. HTML Boilerplate:支持h5的语法
  5. Icon Fonts:用于流行的图标字体的小片,如字体,Awesome, ionicon,图标,Octicons,材料设计图标,还有更多!
  6. open-in-browser: 浏览器预览

三、css相关

  1. HTML CSS Support:让 html 标签上写class 智能提示当前项目所支持的样式
    新版已经支持scss文件检索
  2. Color Info: 提供关于css颜色的快速信息。
  3. CSS Modules:用于CSS模块的isual Studio代码扩展
  4. CSS Peek: 快速定义到css变量
  5. cssrem:一个CSS值转REM的VSCode插件
  6. px2rem: px转换成rem

四、js相关

  1. Auto Close Tag: Typescript自动import提示
  2. ESLint:ESLint插件,高亮提示
  3. JavaScript (ES6) code snippets: ES6语法代码段
  4. Auto Import - ES6, TS, JSX, TSX: 自动导入- ES6, TS, JSX, TSX (VSCode扩展)
  5. AutoFileName: 自动补全文件名称
  6. Flow Language Support: flow 语法检测
  7. jQuery Code Snippets: jq语法支持提示
  8. Path Intellisense: 自动路劲补全,默认不带这个功能的,赶紧装
  9. Quokka.js:
  10. Regex Previewer:
  11. vscode-faker:生成各种虚假数据,如姓名,地址等等

五、react相关

  1. React Native Tools:
  2. React-Redux ES6 Snippets:
  3. React-Native/React/Redux snippets for es6/es7:
  4. Reactjs code snippets:
  5. Typescript React code snippets: 在Typescript支持react

六、vue相关

  1. Vetur:snippet代码片段
  2. vue-beautify:
  3. VueHelper:snippet代码片段

七、angular相关

八、git相关

  1. Git Blame:在状态栏显示当前行的Git信息
  2. Git History(git log):查看git log
  3. GitLens:显示文件最近的commit和作者,显示当前行commit信息
  4. gitignore:.gitignore文件语法

九、node相关

  1. Node modules resolve: 快速导航到Node模块
  2. Code Runner:运行选中代码段(支持大量语言,包括Node)
  3. npm: 支持npm命令
  4. Npm Intellisense:require 时的包提示(最新版的vscode已经集成此功能)
  5. View Node Package:

十、其他

  1. Debugger for Chrome:让 vscode 映射 chrome 的 debug功能,静态页面都可以用 vscode 来打断点调试,真666~
  2. File Peek:根据路径字符串,快速定位到文件
  3. Debugger for Java:用于Visual Studio代码的轻量级Java调试器。
  4. filesize: 在底部状态栏显示当前文件大小,点击后还可以看到详细创建、修改时间
  5. markdownlint:markdown语法检测
  6. Material Icon Theme: 文件图标
  7. One Dark Pro: atom主题
  8. Project Manager: 在多个项目之前快速切换的工具
  9. seti-icons:
  10. Version Lens: 显示每个包的最新版本
文章目录
  1. 1. 一、格式
  2. 2. 二、html相关
  3. 3. 三、css相关
  4. 4. 四、js相关
  5. 5. 五、react相关
  6. 6. 六、vue相关
  7. 7. 七、angular相关
  8. 8. 八、git相关
  9. 9. 九、node相关
  10. 10. 十、其他