这一次，我们以vue3项目为例。实现在项目中保存文件，自动格式化。包括js语法，css样式格式化和html的标签格式化；

我们用vite新建一个项目：

1，我们在项目总安装如下依赖：

（1）安装ESLint：

npm i -D eslint eslint-plugin-vue @typescript-eslint/parser @typescript-eslint/eslint-plugin

（2）安装Prettier

npm i -D prettier eslint-config-prettier eslint-plugin-prettier

2 我们在根目录下新建.eslintrc.js文件

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/typescript/recommended',
    '@vue/prettier',
    '@vue/prettier/@typescript-eslint',
    'plugin:prettier/recommended'
  ],
  parserOptions: {
    parsar: '@typescript-eslint/parsar',
    ecmaVersion: 2020,
    sourceType: 'module'
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
  }
}

3 在项目跟目录下新建 .prettierrc.js 文件

module.exports = {
  printWidth: 120, // 换行字符串阈值
  tabWidth: 2, // 设置工具每一个水平缩进的空格数
  useTabs: false,
  semi: false, // 句末是否加分号
  vueIndentScriptAndStyle: true,
  singleQuote: true, // 用单引号
  trailingComma: 'none', // 最后一个对象元素符加逗号
  bracketSpacing: true,
  jsxBracketSameLine: true, // jsx > 是否另取一行
  arrowParens: 'always', // 不需要写文件开头的 @prettier
  insertPragma: false, // 不需要自动在文件开头加入 @prettier
  endOfLine: 'lf' // 换行符使用 lf
}

4 在根目录下新建一个.vscode文件夹。在里面再新建一个settings.json，用来设置vscode的全局配置

{
  "editor.fontSize": 20, // 编辑器字体大小
  "terminal.integrated.fontSize": 18,	// terminal 框的字体大小
  "editor.tabSize": 2, // Tab 的大小 2个空格
  "editor.formatOnSave": true, // 保存是格式化
  "prettier.singleQuote": true, // 单引号
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.format.enable": true,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "html",
    "vue",
    "typescript",
    "typescriptreact"
  ],

}

5 关闭vscode。再次启动。保存就会自动格式化

注意点：

1 .vscode文件夹下的setttings.json,而不是.settings.json,这里要注意。踩坑了。浪费了不少时间

2 本例中settings.json让prettier只对vue文件做了约束，导致项目中.js文件可能出现保存并不生效的问题。这时候我们可以加上如下配置

  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },

把json，javscript和css以及ts的校验全部交给prettier。这样就可以实现其他文件同样在保存时自动格式化

3 注意vscode的打开环境。比如我们项目路径是program/app，如果我们通过vscode打开program，此时保存自动格式化时无法生效的。需要通过vscode直接打开app这个项目目录，才可以