eslint9.0之后如何安装旧版本eslint+prettier规范eslint + prettier eslint升

eslint + prettier

eslint升级9.0之后，配套的插件都还没来得及更新。目前要做eslint规则配置，比较麻烦。这里还是想回退到老版本的eslint+prettier的经典组合，等待配套插件更新吧。

点击eslint9.0之后如何安装新版本eslint+prettier规范，可查看新版本配置方法。

eslint安装

目前通过指令安装，主要有三种方法。

// 1. 官网推荐安装方式，会自动找寻最新的eslint版本和相关配置方法，想玩最新的eslint可以走。
npm init @eslint/config@latest

// 2. 同上，不过是另一种写法。
npx eslint --init

// 3. 调用eslint的配置文件去创建，安装eslint时会经常看到这个文件，上述两个指令其实都是对这个的引用。
npx @eslint/create-config@latest

这里如果通过1和2的方式去安装eslint，很难退回到经典老版本，因为eslint安装配置还是最新的，相关的安装选项也有一些变化。这里的@eslint/create-config其实有版本的，0.x对应是经典老版本，1.x对应的是9.0之后的版本。通过npm去查看其版本，发现最新稳定版本是0.4.6，这就好办了。

执行安装命令，马上回到经典的安装，看到熟悉的选项。

C:\crlandCode\fcode\electron-vue3-vite>npx @eslint/create-config@0.4.6
√ How would you like to use ESLint? · style       
√ What type of modules does your project use? · esm
√ Which framework does your project use? · vue
√ Does your project use TypeScript? · No / Yes
√ Where does your code run? · browser, node
√ How would you like to define a style for your project? · guide
√ Which style guide do you want to follow? · standard    
√ What format do you want your config file to be in? · JavaScript

回头看一下版本和配置文件，感觉回来了。

安装prettier

prettier的安装除了自身prettier以外，还有eslint-plugin-prettier(prettiter配合eslint插件)和eslint-config-prettier（prettier对eslint的规则补充）。

执行命令

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

致辞所有安装完成

修改配置

首先是修改eslint配置文件，告诉eslint要配合prettier风格。

// .eslintrc.cjs
module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true
  },
  extends: [
    'standard',
    'plugin:vue/vue3-essential',
    'prettier' // 新增
  ],
  overrides: [
    {
      env: {
        node: true
      },
      files: [
        '.eslintrc.{js,cjs}'
      ],
      parserOptions: {
        sourceType: 'script'
      }
    }
  ],
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module'
  },
  plugins: [
    'vue',
    'prettier' // 新增
  ],
  rules: {
    'prettier/prettier': 'error' // 新增
  }
}

然后新增prettierrc.cjs文件，稍微修改一下，这里是我喜欢的几个代码规范规则，有注释。

module.exports = {
  printWidth: 120, // 一行的字符数换行
  tabWidth: 2, // 一个tab代表几个空格数
  useTabs: false, // 是否使用tab进行缩进
  singleQuote: true, // 字符串是否使用单引号
  semi: false, // 行尾是否使用分号，默认为true
  trailingComma: 'none', // 是否使用尾逗号
  arrowParens: 'avoid', // 箭头函数单变量省略括号
  bracketSpacing: true, // 对象大括号直接是否有空格，默认为true，效果：{ foo: bar }
  endOfLine:"auto" // 保留在 Windows 和 Unix 下的换行符
}

vscode设置

eslint+prettier也需要vscode配置。依次点击文件=》首选项=》设置

进入设置页面之后，点击右上角的json图标，进入setting.json页面。

不玩其他，只做eslint的配置，只需要设置三个动作。

eslint开关
vscode代码保存后动作（个人喜欢保存代码自动修复代码）
校验文件类型

// setting.json
{
    ...
    "eslint.enable": true, // 打开eslint开关--必要条件
    "editor.codeActionsOnSave": { // 编辑器.代码保存时进行的操作--非必要
        "source.fixAll.eslint": "always" // 通过eslint进行代码修复：总是如此
    },
    "eslint.validate": [ // eslint 需要校验的文件（js,jsx,ts,tsx,vue)--必要条件
        "javascript",
        "typescript",
        "javascriptreact",
        "typescriptreact",
        "vue"
    ]
    ...
}

补充

vue3.4简写会报错，解决方法很简单，卸载vscode的Vetur，使用最新的Vue - Official。
有时候会用到单单词vue文件名，如某个模块下的index.vue，页面中的新增和编辑等弹窗dialog/Edit.vue/dialog/Add.vue等。所以可以在rules新增规则'vue/multi-word-component-names': 'off'以去掉eslint报错。
template需要加class的报错可以加上'vue/no-useless-template-attributes': 'off'

新增规则直接加在eslintrc.cjs文件中的rules里