VScode 超好用的插件「工欲善其事,必先利其器」

---

一、开发类

1. HTML CSS Support：html提示css自动补全。
   

2. Auto Close Tag：自动闭合标签。
   

3. Auto Rename Tag：重新命名标签。
   

4. CSS Peek：快速查看当前标签设置的css属性。「将光标移动要需要查看的标签，然后按下f12即可查看」
   

5. cdnjs：在线的js文档。
   

6. ESLint：可组装的JavaScript和JSX检查工具。
   

7. Prettier - Code formatter：代码格式化。
   

8. Tabnine Autocomplete AI：代码智能提示。
   

9. Code Runner：编译运行代码。
   setting.json 常见语言配置：

{
     
  "code-runner.executorMap": {
     
    "javascript": "node",
    "php": "C:\\php\\php.exe",
    "python": "python",
    "perl": "perl",
    "ruby": "C:\\Ruby23-x64\\bin\\ruby.exe",
    "go": "go run",
    "html": "\"C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe\"",
    "java": "cd $dir && javac $fileName && java $fileNameWithoutExt",
    "c": "cd $dir && gcc $fileName -o $fileNameWithoutExt && $dir$fileNameWithoutExt"
  }
}

10. Sass：自动编译sass或scss文件。
    
    setting.json相关配置

"liveSassCompile.settings.formats": [
 {
     
   "format": "expanded", // 设置编译之后的格式
   "extensionName": ".css", // 编译后缀名
   "savePath": "~/../css" // 编译之后的路径 相对路径
 }
],
"liveSassCompilce.settings.excludeList": ["**/node_modules**", ".vscode/**"],

不知道编译格式可以看这里，配置完成后，别忘记了开启编辑器右下加的watch sass功能。

---

二、效率类

1. Chinese (Simplified) Language：中文（简体）语言包为 VS Code 提供本地化界面。
   

2. Live Server：启动本地服务，实时预览效果。
   

3. GitHub Pull Requests and Issues：管理你的github仓库。
   

4. 码云（Gitee）常用功能：管理你的gitee仓库。
   

5. GitLens — Git supercharged：显示文件最近的commit和作者，显示当前行commit信息
   

6. Git Blame 在状态栏显示当前行的Git信息
   

7. Git History(git log) 查看git log
   

8. Path Intellisense：路径智能补全。
   

9. Image preview：预览引入的图片素材。
   

10. Local History：记录文件编辑的历史记录。
    

11. any-rule：包含70条常用的正则表达式。
    

12. Bracket Pair Colorizer：括号颜色高亮。
    

13. Code Spell Checker：单词拼写检查。
    

14. WakaTime：记录你的编码时间。需要登录官网。
    

15. Markdown Preview Enhanced：查阅 makedown 文件效果。
    

16. project-tree：自动生成工作树。
    
    安装完成之后使用快捷键 ctrl + shift + p 输入 Project Tree 回车即会自动生成。
    

17. Material Icon Theme：设置文件图标主题。
    

18. Monokai Pro：深色模式的主题风格。
    

---

最后，如果您有更好的方法，欢迎在留言区中分享；或者实际操作中遇到什么问题均可留言或者私信我，感谢您的观看！