vscode对标webstorm

前言：公司有人用webstorm、vscode 每次代码格式化总会异常，导致git里面很多无用的变更信息，故而想统一一下

确保你已经安装了 Prettier - Code formatter 和 ESLint 插件。

vscode下 settings.json

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

根目录 .prettierrc

{
  // 使用分号结束语句
  "semi": true,
  // 在对象或数组最后一个元素后面是否加逗号（es5 表示仅在 ES5 中支持的语法结构中添加，none 表示不加，all 表示始终添加）
  "trailingComma": "es5",
  // 使用单引号而不是双引号
  "singleQuote": true,
  // 每行代码的最大长度，超过这个长度将会换行
  "printWidth": 120,
  // 指定每个缩进级别的空格数
  "tabWidth": 2,
  // 换行符使用，auto 表示根据文件内容自动选择
  "endOfLine": "auto",
  // 在对象字面量声明所使用的的花括号后（{）和前（}）输出空格
  "bracketSpacing": true,
  // 将 > 多行 JSX 元素的末尾括号放在最后一行的末尾，而不是单独放在下一行
  "jsxBracketSameLine": false
}

根目录下的 .eslintrc.js

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: ['plugin:vue/vue3-essential', 'eslint:recommended', '@vue/prettier'],
  parserOptions: {
    parser: 'babel-eslint',
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'vue/multi-word-component-names': 'off',
    'prettier/prettier': 'error',
    "no-unused-vars": ["warn"], // 提示未使用的变量
  },
}