VSCode自用技巧汇总

新手必知

创建html文件

在目录左侧“新建文件”时一定要注意

建文件一定要加“后缀名”，不然会变成这种情况
一切正常，却没有正常打开“此页面”

原因

没有html后缀
重命名一下即可

创建html模板代码

1. ctrl + n后，点击右下角，把“纯文本“改为“HTML”

2. 我们在第一行代码输出英文"!"(叹号)

3. 按下Enter键位

推荐安装插件

插件	作用
Chinese Language	中文语言包
Open in Browser	右击选择浏览器打开html文件
Auto Rename Tag	自动重命名配对的HTML/XML标签
CSS Peek	追踪至样式
Live server	当你保存代码时自动更新页面 ctrl + shift + L

安装插件位置

515.png)]

Auto Rename Tage插件简单介绍

当我们更改成对标签的时候，后面的标签同时改变

live server

• 保存代码时自动刷新浏览器页面

插件下载

插件使用

右键Open with live server

使用Vue时插件

Vue 3 Snippets

• 自动识别vue语法
  

Vetur

单文件组件开发，语法识别

快捷键配置

因为我本人是idea用户，所以还是依照自己的常用习惯，这也是老韩推荐的用法，确实好用！

用户配置

向下复制行

ctrl + alt + 键盘下键

Debug：开始调试

Alt + R

Debug：开始执行

Alt + R

删除行

ctrl + D

cursorEnd(光标移动到行尾)

alt + q

系统默认

Debug:重启

F5

使用Live server插件浏览器

ctrl + shift + L

代码自动格式化

我们代码自动格式化是可以安装插件的，但是我在网上看到很多插件都有自己的“弊端”。

我搜到了一篇文章，是配置settings.json

比较好用，给大家分享下（用的中文模式，英文模式也一样）

1. 文件 - 首选项 - 设置

2.打开setting json

3.复制一下代码带内容中

{
    // 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 // 两个选择器中是否换行
}

4. 保存关闭即可
5. ctrl + s 自动格式化

原文地址（感谢分享）

vsCode格式化插件 - 前端开发-周先生 - 博客园 (cnblogs.com)

设置代码片段

例如

制作流程

1. 设置 —— 配置用户代码片段

2. 新建代码片段，选择全局或者单个项目，一般我们都用作全局

3. 输入代码片段名
   

4. 把注释模板都删除，只留下括号
   
   

5. 复制我们想要想实现的代码片段，比如新建vue实例

        new Vue({
            el: '#root',
            data: {
                
            },
        })
        

6. 把“vue实例”代码片段解析
   解析网址

7. 黏贴解析后的代码片段

ctrl + s保存后就可以使用