VS Code配置保存时自动按照eslint格式化vue文件

Step1 给vscode安装Vetur和ESLint插件(已安装则略过)

Step2 在vscode中按下Ctrl+Shift+P键, 在弹出的对话框中输入settings, 不回车

Step3 选择”首选项: 打开设置(json)”, 以打开配置文件 settings.json

Step4 {}是这个json文件的根节点, 在其中按照json格式插入如下节点

// tab 大小为2个空格
"editor.tabSize": 2,
// 编辑器换行
"editor.wordWrap": "off",
// 保存时格式化
"editor.formatOnSave": true,
// 开启 vscode 文件路径导航
"breadcrumbs.enabled": true,
// prettier 设置语句末尾不加分号
"prettier.semi": false,
// prettier 设置强制单引号
"prettier.singleQuote": true,
// 选择 vue 文件中 template 的格式化工具
"vetur.format.defaultFormatter.html": "js-beautify-html",
// vetur 的自定义设置
"vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
        "wrap_attributes": "aligned-multiple"
    },
    "prettier": {
        "singleQuote": true,
        "semi": false,
        "printWidth": 100,
        "wrapAttributes": false,
        "sortAttributes": false
    }
}

如果发现这里有的节点, 在原json中已经存在了, 可以将原来的节点注释掉.

然后保存.

这样再保存时, 就可以按照eslint来格式化vue文件啦. 这样做, 也会造成所有文件都在保存时被格式化.

利用VS Code的快捷键快速书写拼接html的代码

VS Code有一些快捷键, 比如

  1. 选中一些行之后, 按 tab键 可以让它们右移
  2. 选中一些行之后, 按 shift+tab键 让它们左移, 直到它们都移到最左边, 一般齐
  3. 按住 alt+shift键, 然后鼠标左键拖动, 可以选中多行的相同位置
  4. 选中一些行之后, 按 shift+tab+i键 可以让光标出现在多行的行末

我们可以在VS Code中快速书写拼接html的代码, 步骤如下

Step1 粘贴html代码到相应区域

Step2 选中这些html代码, 连续按 alt+tab键, 直到它们左边一般齐

Step3 按住 alt+shift键, 然后以鼠标左键拖动的方式, 选定这些html的全部行首, 在行首添加其他语言的代码

Step4 选中这些html的行, 然后按 shift+alt+i键, 选定它们的行末, 然后再行末添加其他语言的代码

示例图片如下