Vue推荐VSCode开发必备的插件

首先这几个是VSCode推荐Vue开发必备的插件

• Vetur —— 语法高亮、智能感知、Emmet等
• EsLint —— 语法纠错
• view in browser —— 如何用浏览器预览运行html文件
• Debugger for Chrome —— 映射vscode上的断点到chrome上，方便调试（配置有点麻烦，其实我没用这个）
• Auto Close Tag —— 自动闭合HTML/XML标签
• Auto Rename Tag —— 自动完成另一侧标签的同步修改
• JavaScript(ES6) code snippets —— ES6语法智能提示以及快速输入，除js外还支持.ts，.jsx，.tsx，.html，.vue，省去了配置其支持各种包含js代码文件的时间
• Path Intellisense —— 自动路劲补全
• HTML CSS Support —— 让 html 标签上写class 智能提示当前项目所支持的样式
• React-native 快捷键显示-----react组件模板；例如：cccs
• vue vscode snippets 快捷键显示------vue组件模板；例如：vba
• power mode：敲代码有暴击炫酷效果

1、设置：“文件”=》“首选项”=》“设置”=》扩展》power mode

  "powermode.enabled": true,
  //样式
  "powermode.presets": "fireworks",

 

• 自动编译scss

1、下载easy sass 

2.设置setting.json：文件=》首选项=》设置=》扩展=》easy sass =》打开setting.json

或者 ctrl+p ，输入setting.json打开

    "easysass.compileAfterSave": true, 
    "easysass.formats": [ //nested：嵌套缩进的 css 代码。
    //expanded：没有缩进的、扩展的css代码。
    //compact：简洁格式的 css 代码。
    //compressed：压缩后的 css 代码

        {
            "format": "expanded",
            "extension": ".css"
        },
        {
            "format": "compressed",
            "extension": ".min.css"
        }
    ],
    "easysass.targetDir": "./" //路径

3、新建index.scss，保存自动边编译出index.css 和 index.min.css，一个打包，一个打包的

• cssrem：css转rem提示

1、下载cssrem

2、设置

3、重启vscode