VScode插件

vscode浏览器打开html,修改默认浏览器

1.vscode浏览器预览open-in-browser

 

1.1点击拓展

1.2.输入open in browser，选择第一个

1.3.点击安装(笔者已安装，所以显示的禁用)

1.4.vscode怎么修改默认浏览器

在安装完open in browser插件后，在html代码中鼠标右键可以看到多了两个打开选择，点击选项即可打开浏览器进行预览。

Open in Default Browsers：使用默认浏览器打开  快捷键：alt+b

Open in Other Browsers：使用其他浏览器打开  快捷键：alt+shift+b

 

那么怎么修改默认浏览器呢？

1.5.选择文件---首选项---设置

 

 

输入open-in-browser.default搜索

 

你会看到右侧多了工作区设置，比如你想默认谷歌打开，那就设置默认浏览器为chrome，如果是火狐，就设置firefox。设置完毕ctrl+s进行保存，就可了。

无效的情况下可以修改系统的默认浏览器试一下

 

2、自定义快捷键

一、打开vscode,选择文件–首选项–用户代码片段

二、在输入框内输入javascript类型，打开javascript.json文件

"Print to console": {
        "prefix": "c",  //自己定义的快捷键
        "body": [
            "console.log();",//快捷键要生成的代码片段
        ]
    }

3、Auto Rename Tag

　　自动完成另一侧标签的同步修改

 

4、Auto Close Tag

　　自动闭合HTML/XML标签

 

5、Bracket Pair Colorizer

　　给括号加上不同的颜色，便于区分不同的区块，使用者可以定义不同括号类型和不同颜色

 

6、Markdown Preview Enhanced

　　实时预览markdown，markdown使用者必备

 

7、Material Icon Theme

个人认为最好的vscode图标主题，支持更换不同色系的图标，值得点出的是，该插件更新极其频繁，基本和vscode更新频率保持一致

 

8、Path Intellisense

可自动填充文件名。

 

9、HTMLHint

　html代码检测

10、htmltagwrap

可以在选中HTML标签中外面套一层标签
使用方法：选中要包裹的代码，快捷键Alt+w，默认外包裹标签为p，可以在设置里搜索htmltagwrap将外包裹标签改为div

 

 

11、Image Preview

鼠标悬浮在链接或者装订线(gutter)左边可以预览到图片

 

12、代码片段类插件

英文叫做 Snippets，就是把常见的代码模式抽出来，通过 2~3 个键就能展开 N 行代码。

当前最流行的，已有超过 120 万的下载量。这个插件为 JavaScript、TypeScript、HTML、React 和 Vue 提供了 ES6 的语法支持；

 

13、React-Redux ES6 Snippets

 

14、jQuery Code Snippets

 

15、CSS Peek

　　使用此插件，你可以追踪至样式表中 CSS 类和 id 定义的地方。当你在 HTML 文件中右键单击选择器时，选择“ Go to Definition 和 Peek definition ”选项，它便会给你发送样式设置的 CSS 代码。

安装完成后打开HTML文件，按住CTRL键同时移到鼠标到要查看样式的类上就可以看到该类的定义了。

 

跳转到样式的定义，按住CTRL键同时点击样式类的名称或者在类的名称上按F12键即可跳转到样式的定义。CSS Peek在开前端开发过程中节省了好多查找样式的时间，真的方便极了。

     

16、Prettier - Code formatter

 

配置.prettierrc.js

module.exports = {

  trailingComma: 'es5',

  tabWidth: 4,

  semi: true,

  singleQuote: true,

}

ctrl + shift + F 格式化文件，如果没有生效，重新加载下Prettier插件！

17、Window Colors

每个VSCode窗口都可以独特地自动着色。

18、Code Spell Checker

代码拼写检查器

一个与camelCase代码配合良好的基本拼写检查程序。

此拼写检查程序的目标是帮助捕获常见的拼写错误，同时保持误报数量较低。

19、Indent-Rainbow

用四种不同颜色交替着色文本前面的缩进

20、Import Cost

对引入的计算大小

 

21、GitLens

git日志查看插件

GitLens 增强了 Visual Studio Code 中内置的 Git 功能。例如 commits 搜索，历史记录和和查看代码作者身份，还能通过强大的比较命令获得有价值的见解等等

22、Regex Previewer

这是一个用于实时测试正则表达式的实用工具。它可以将正则表达式模式应用在任何打开的文件上，并高亮所有的匹配项。
在并排文档中显示当前正则表达式的匹配项

 

 

23、Reactjs code snippets

　　一个 React 自动补工具。

24、Vue VSCode  Snippets

　　VUE代码自动补全插件

25、quokka

　　一个调试工具插件，能够根据你正在编写的代码提供实时反馈。它易于配置，并能够预览变量的函数和计算值结果。另外，在使用 JSX 或 TypeScript 项目中，它能够开箱即用

26、filesize

　　在底部状态栏显示当前文件大小，点击后还可以看到详细创建、修改时间

27、vscode-icon

可以使VScode左侧的资源管理器根据文件类型显示图标

28、在node环境下运行js:

code runner

29、Debugger for Chrome

用Chrome来Debug你的JavaScript代码，或则其它支持Chrome Debugger协议的平台。

30、智能CSS补全工具(IntelliSense for CSS class names in HTML)

基于你的项目以及通过link标签引用的外部文件，该智能插件提供HTML中CSS class名字的补全。

31、PostCss sorting

css排序

32、现在看到的是界面配置模式，点击右上角的大括号（如下图），可以打开 settings.json 文件。

{
    // vscode默认启用了根据文件类型自动设置tabsize的选项
    "editor.detectIndentation": false,
    // 重新设定tabsize
    "editor.tabSize": 4,
    // #值设置为true时，每次保存的时候自动格式化；值设置为false时，代码格式化请按shift+alt+F
    "editor.formatOnSave": false,
    // #每次保存的时候将代码按eslint格式进行修复
    "eslint.autoFixOnSave": true,
    // 添加 vue 支持
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        {
            "language": "vue",
            "autoFix": true
        }
    ],
    //  #让prettier使用eslint的代码格式进行校验
    "prettier.eslintIntegration": true,
    //  #去掉代码结尾的分号
    "prettier.semi": false,
    //  #使用带引号替代双引号
    "prettier.singleQuote": true,
    "prettier.tabWidth": 4,
    //  #让函数(名)和后面的括号之间加个空格
    "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
    // #这个按用户自身习惯选择
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    // #让vue中的js按"prettier"格式进行格式化
    "vetur.format.defaultFormatter.js": "prettier",
    "vetur.format.defaultFormatterOptions": {
        "js-beautify-html": {
            // #vue组件中html代码格式化样式
            "wrap_attributes": "force-aligned", //也可以设置为“auto”，效果会不一样
            "wrap_line_length": 200,
            "end_with_newline": false,
            "semi": false,
            "singleQuote": true
        },
        "prettier": {
            "semi": false,
            "singleQuote": true
        }
    },
    "[jsonc]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    // 格式化stylus, 需安装Manta's Stylus Supremacy插件
    "stylusSupremacy.insertColons": false, // 是否插入冒号
    "stylusSupremacy.insertSemicolons": false, // 是否插入分号
    "stylusSupremacy.insertBraces": false, // 是否插入大括号
    "stylusSupremacy.insertNewLineAroundImports": false, // import之后是否换行
    "stylusSupremacy.insertNewLineAroundBlocks": false,
    "prettier.useTabs": true,
    "files.autoSave": "off",
    "explorer.confirmDelete": false,
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[json]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "diffEditor.ignoreTrimWhitespace": false // 两个选择器中是否换行
}