eslint9

初始化命令

官方推荐执行命令是：

  npm init @eslint/config@latest

 或者

  npx eslint --init

或者也可以使用如下命令，这样就可以愉快的使用git standard风格，同时eslint的版本是8.57.0。

  npm init @eslint/config@latest -- --config eslint-config-standard

√ How would you like to use ESLint? · problems
√ What type of modules does your project use? · esm
√ Which framework does your project use? · vue
√ Does your project use TypeScript? · javascript
√ Where does your code run? · browser, node
The config that you've selected requires the following dependencies:

eslint@9.x, globals, @eslint/js, eslint-plugin-vue
√ Would you like to install them now? · No / Yes
√ Which package manager do you want to use? · npm
☕️Installing...

eslint安装

此时根目录下会生成eslint.config.js文件，这是eslint最新的配置文件。打开文件，内容如下：

import globals from 'globals'
import pluginJs from '@eslint/js'
import pluginVue from 'eslint-plugin-vue'

export default [
  { files: ['**/*.{js,mjs,cjs,vue}'] },
  { languageOptions: { globals: { ...globals.browser, ...globals.node } } },
  pluginJs.configs.recommended,
  ...pluginVue.configs['flat/essential']
]

到这里，就要开始配置prettier了

npm i prettier eslint-config-prettier -D

执行安装命令，我们只安装prettier本体和eslint-config-prettier配置。看过上一篇介绍eslint+prettier的同学会发现少了一个eslint-plugin-prettier插件。这里我是通过实验，发现不需要插件，直接可以用本体+配置就可以实现之前的效果。后续如果有什么问题，我会更新。

安装完插件之后，需要手动创建文件.prettierrc。个人比较喜欢的选项如下

// @ts-check

/** @type {import("prettier").Config} */
module.exports = {
  // 每次修改prettier配置项需要重新打开vscode才会生效
  bracketSpacing: true,
  semi: true, // 分号
  tabWidth: 2, // 缩进
  printWidth: 130, // 行宽
  singleQuote: false, // 使用双引号
  trailingComma: "none", // 后置逗号，多行对象、数组在最后一行是否增加逗号
  arrowParens: "avoid", // 箭头函数只有一个参数的时候可以忽略括号
  endOfLine: "lf" // 结尾是 \n lf | \r cr | \n\r crlf | auto
};

eslint + prettier配置

到最后，这里的配置比上个版本要简单很多。只需要把eslint-config-prettier引入进来即可。

import globals from 'globals'
import pluginJs from '@eslint/js'
import pluginVue from 'eslint-plugin-vue'
import eslintConfigPrettier from 'eslint-config-prettier' // 新增

export default [
  { files: ['**/*.{js,mjs,cjs,vue}'] },
  { languageOptions: { globals: { ...globals.browser, ...globals.node } } },
  pluginJs.configs.recommended,
  ...pluginVue.configs['flat/essential'],
  eslintConfigPrettier // 新增
]