vscode 格式化 code

{
  "workbench.colorTheme": "Monokai",
  "files.autoSave": "onFocusChange",
  "editor.fontSize": 14, // 设置字体
  "editor.tabSize": 2, // 设置tab位2个空格，设置后在页面可查看.
  "editor.tabCompletion": "on", // 用来在出现推荐值时，按下Tab键是否自动填入最佳推荐值
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.organizeImports": true, // 这个属性能够在保存时，自动调整 import 语句相关顺序，能够让你的 import 语句按照字母顺序进行排列
    "source.fixAll.stylelint": true, // 自动修复css
  },
  "editor.lineNumbers": "on", // 设置代码行号
  "editor.formatOnSave": true,
  "explorer.confirmDelete": false,
  // #让vue中的js按"prettier"格式进行格式化
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "vetur.format.defaultFormatter.js": "prettier-eslint",
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      // - auto: 仅在超出行长度时才对属性进行换行
      // - force: 对除第一个属性外的其他每个属性进行换行
      // - force-aligned: 对除第一个属性外的其他每个属性进行换行，并保持对齐
      // - force-expand-multiline: 对每个属性进行换行
      // - aligned-multiple: 当超出折行长度时，将属性进行垂直对齐
      // #vue组件中html代码格式化样式
      "wrap_attributes": "aligned-multiple", //也可以设置为“auto”，效果会不一样
      "wrap_line_length": 180,
      // 是否在每行末尾添加分号
      "semi": false,
      "singleQuote": true
    },
    "prettier": {
      "semi": false,
      "singleQuote": true,
    },
    "prettyhtml": {
      "printWidth": 160,
      "singleQuote": false,
      "wrapAttributes": false,
      "sortAttributes": false
    }
  },
  "[vue]": {
    "editor.defaultFormatter": "octref.vetur"
  },
  "files.insertFinalNewline": true,
  "[javascript]": {
    "editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
  },
  "vetur.validation.interpolation": false,
  "[css]": {
    "editor.formatOnSave": true
  },
}

---

stylelint 格式化 css 代码

下载依赖

npm install --save-dev stylelint stylelint-config-standard

在项目根目录下新建一个 .stylelintrc.json 文件并输入以下内容：

{    "extends": "stylelint-config-standard"}

VSCode 添加 stylelint 插件

ff8f502455142a946ef2bd04b36ad005.png

然后就可以看到效果了。

1c7681267e2772a2c61e770a26c7bb40.gif

如果你想修改插件的默认规则，可以看官方文档^[1]，它提供了 170 项规则修改。例如我想要用 4 个空格作为缩进，可以这样配置：

{    
"extends": "stylelint-config-standard",   
 "rules": {        "indentation": 4    }
}

---

使用 vetur 格式化 vue，
使用 prettier-eslint 格式化 js
使用 stylelint

注意删除 项目里的.vscode 文件，好像默认禁用vetur，会造成 扩展插件 vetur 无法格式化 xxx。vue的警告。

从 右键->格式化文档的方式-> 如果选项里有vetur,则说明没有问题。 如果没有，则会提示上述错误信息