使用 ESLint+Prettier 统一 Vue3 项目代码风格

$ yarn create vite

√ Project name: ... my-app

? Select a framework: » - Use arrow-keys. Return to submit.    Vanilla>   Vue    React    Preact    Lit    Svelte

? Select a variant: » - Use arrow-keys. Return to submit.>   JavaScript    TypeScript    Customize with create-vue    Nuxt

$ cd my-app

$ yarn add -D eslint

$ npm init @eslint/config

? How would you like to use ESLint? ...  To check syntax only> To check syntax and find problems  To check syntax, find problems, and enforce code style

? What type of modules does your project use? ...> JavaScript modules (import/export)  CommonJS (require/exports)  None of these

? Which framework does your project use? ...  React> Vue.js  None of these

Does your project use TypeScript? » No / Yes

? Where does your code run? ...  (Press <space> to select, <a> to toggle all, <i> to invert selection)√ Browser√ Node

? What format do you want your config file to be in? ...> JavaScript  YAML  JSON

The config that you've selected requires the following dependencies:
eslint-plugin-vue@latest? Would you like to install them now? » No / Yes

? Which package manager do you want to use? ...  npm> yarn  pnpm

module.exports = {    "env": {        "browser": true,        "es2021": true,        "node": true    },    "extends": [        "eslint:recommended",        "plugin:vue/vue3-essential"    ],    "overrides": [    ],    "parserOptions": {        "ecmaVersion": "latest",        "sourceType": "module"    },    "plugins": [        "vue"    ],    "rules": {    }}

$ yarn add -D prettier eslint-config-prettier eslint-plugin-prettier

$ touch .prettierrc

{  "bracketSpacing": true,  "printWidth": 120,  "proseWrap": "always",  "semi": false,  "singleQuote": true,  "trailingComma": "none"}

module.exports = {  env: {    browser: true,    es2021: true,    node: true  },  extends: [      'eslint:recommended',       'plugin:vue/vue3-recommended',       'plugin:prettier/recommended'  ],  overrides: [],  parserOptions: {    ecmaVersion: 'latest',    sourceType: 'module'  },  plugins: ['vue', 'prettier'],  rules: {}}

{  "name": "02-my-app",  "private": true,  "version": "0.0.0",  "type": "module",  "scripts": {    "dev": "vite",    "build": "vite build",    "preview": "vite preview"  },  "dependencies": {    "vue": "^3.2.37"  },  "devDependencies": {    "@vitejs/plugin-vue": "^3.1.0",    "eslint": "^8.23.1",    "eslint-config-prettier": "^8.5.0",    "eslint-plugin-prettier": "^4.2.1",    "eslint-plugin-vue": "^9.5.1",    "prettier": "^2.7.1",    "vite": "^3.1.0"  }}

{  "update.enableWindowsBackgroundUpdates": false,  "workbench.iconTheme": "material-icon-theme",  "editor.codeActionsOnSave": {    "source.fixAll.eslint": true  },  // 每次保存的时候自动格式化  "editor.formatOnSave": true,  "editor.defaultFormatter": "esbenp.prettier-vscode",  "eslint.format.enable": true,  "eslint.alwaysShowStatus": true,  "eslint.validate": [    "javascript",    "javascriptreact",    "vue",    "typescript",    "typescriptreact"  ]}