首页 > 其他分享> 文章详细

vsCode插件

2021-08-23 10:00:09 阅读：170 来源： 互联网

标签：插件 settings vsCode js 提示 liveServer Snippets

随心排列，寻找适合自己的

汉化。Chinese

npm Intellisense npm 模块导入插件

Sync Settings 设置同步插件，不用每次配置，云同步

一、基础
1.HTML Snippets 智能提示HTML标签，以及标签含义

2.HTML CSS Support 智能提示CSS类名以及id

3.JavaScript(ES6) code snippets ES6语法智能提示，快速输入，还支持.js，还支持.ts，.jsx，.tsx，.html，.vue

4. jQuery Code Snippets 　jQuery代码智能提示

5. Code Runner 运行js等。

6. TypeScript Hero TS开发提示工具

二、优化
1.Bracket Pair Colorizer 给括号加上不同的颜色，便于区分不同的区块，使用者可以定义不同括号类型和不同颜色

2.Auto Close Tag 自动闭合HTML/XML标签

3.Auto Rename Tag 自动完成另一侧标签的同步修改

4.open in browser 支持右键打开文件。

5.Path Intellisense 自动提示路径，快速导入文件。

6.Material Icon Theme 好看的文件图标。

7.Beautify 代码格式化。

8.Power Mode 酷炫的输入动效

9.Document This js代码规范注释

10.Code Spell Checker 英语拼写检测，对于js命名很有用哦

11.vscode-fileheader 作者个人信息注释，自动保存最后代码书写时间

12. ESLint js语法检测，痛并快乐着。

13.codelf 程序员命名神器，支持多种语言。

14. Visual Studio Code Commitizen Support git提交规范插件。

15。koroFileHeader （快捷代码注释插件）

16。 Project Manager 多个项目管理插件。

17. Live Server 开启本地服务器

配置Live Server  
{
  "liveServer.settings.port": 8080, //设置本地服务的端口号
      "liveServer.settings.root": "/", //设置根目录，也就是打开的文件会在该目录下找
      "liveServer.settings.CustomBrowser": "chrome", //设置默认打开的浏览器
      "liveServer.settings.AdvanceCustomBrowserCmdLine": "chrome --incognito --remote-debugging-port=9222",
      "liveServer.settings.NoBrowser": false,
      "liveServer.settings.ignoredFiles": [//设置忽略的文件
          ".vscode/**",
          "**/*.scss",
         "**/*.sass"
     ]
 }

或者
{
    "workbench.colorTheme": "Default Light+",
    "editor.renderWhitespace": "all",
    "editor.fontSize": 18,
    "editor.fontFamily": "'Courier New',Consolas,  monospace",
    "search.followSymlinks": false,
    "workbench.iconTheme": "vscode-icons",
    "editor.suggestSelection": "first",
    "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
    "liveServer.settings.NoBrowser": true,
    "liveServer.settings.CustomBrowser": "chrome",
    "liveServer.settings.donotShowInfoMsg": true,
    "liveServer.settings.donotVerifyTags": true,
    "liveServer.settings.port": 5500,

}

launch.json
{
            "type": "chrome",
            "request": "launch",
            "name": "使用本机chrom调试",
            "url": "http://localhost:8088",
            "webRoot": "${workspaceFolder}",
            "file":"${workspaceRoot}/html/recBug.html", //这个是在浏览器中要运行的文件的路径，每次运行不同项目的时候需要修改里面的运行路径
        }
或者
npm install -g live-server
执行live-server 启动

三、框架
1.Vetur Vue多功能集成插件，包括：语法高亮，智能提示，emmet，错误提示，格式化，自动补全，debugger

2.React/Redux/react-router Snippets react智能提示。

3.Angular 5 Snippets angular智能提示。

4.Node.js Modules Intellisense node.js智能提示。

5. Element UI Snippets element UI提示

四、MarkDown
1.Markdown Preview Enhanced （可以用markdown语法编辑，预览）

2. Markdown Table Formatter （markDown 格式化插件）

五、工具
1. px to rem & rpx (cssrem) （px转换rem工具）

标签：插件,settings,vsCode,js,提示,liveServer,Snippets
来源： https://www.cnblogs.com/KindJoker/p/15174672.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vsCode插件

随心排列，寻找适合自己的