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不能格式化问题