Mac下Visual Studio Code的快捷设置

1、安装

下载网址:https://code.visualstudio.com/Download
选择自己的系统选择安装文件 windows or mac

 每个电脑的初始化快捷方式可能不一样,
可以通过打开设置界面查询

2、查看初始化键盘快捷方式

  首选项  ->  键盘快捷方式
image.png

打开后 可以通过搜索找关键字,也可更改默认快捷键设置


image.png

3、设置ctrl+B

打开chrome浏览器预览HTML

  • 打开扩展插件 command+shift+X
    搜索view in browser 安装 (注意别下错)
    image.png
  • 安装完之后打开键盘快捷方式(1里有介绍)
    搜索view in browser 会发现多出一条
    我们可以根据自己习惯修改


    image.png

4、打开终端

  • VScode mac系统没有快捷打开终端,可以默认command+shift+Y打开控制台,就看到终端了
    image.png

5、停止终端运行

ctrl+c

6、vue高亮提示插件

vetur ESLine

7、创建vue快捷模版

首选项->用户代码片段 选择vue 回车
打开vue.json 输入代码:

    "Print to console": {
        "prefix": "vue",
        "body": [
            "<template>",
            "<div class=\"home\">",
            "<h1>{{ msg }}</h1>",
            "</div>",
            "</template>",
            "<script>",
            "export default {",
            "name: 'home',",
            "data () {",
            "return {",
            "msg: 'Home'",
            "}",
            "}",
            "}",
            "</script>",
            "<!-- Add \"scoped\" attribute to limit CSS to this component only -->",
            "<style scoped lang=\"scss\">$color: #dd3333;",
            "h1 {",
            "text-align: center;",
            "font-weight: normal;",
            "color: $color;",
            "}",
            "</style>"
        ],
        "description": "Log output to console"
    }
}

使用:vue tab键

8、格式化文本

mac系统默认shift+alt+F

9、vscode中的vue文件中emmet进行tab键不起作用

设置方法:
文件-首选项-设置


image.png

在右边设置代码

"emmet.syntaxProfiles": { 
"vue-html": "html", 
"vue": "html"
}

ctrl+s保存,自动生效

10、每次打开文件会覆盖窗口中的文件,解决办法

  • 1、打开文件是双击就好啦
    因为单机的时候


    image.png

    是斜体,属于预览模式
    双击或者编辑之后,就可以啦


    image.png
  • 2、更改设置
    文件->首选项->设置
    找到workbench.editor.enablePreview

    image.png

    改成:
    "workbench.editor.enablePreview": false,
    就可以啦

11、vue 在vs code格式化问题

更改设置

   "eslint.autoFixOnSave": true,
  
   "eslint.validate": [
       "javascript",{
           "language": "vue",
           "autoFix": true
       },"html",
       "vue"
   ],
   "vetur.format.defaultFormatter.js": "vscode-typescript",

解决格式化后 双引号报错问题

    "vetur.format.defaultFormatter.html": "js-beautify-html"

解决vue 里的html不能格式化问题

推荐阅读更多精彩内容