vscode+eslint+prettier自动格式化配置

3729

vscode+eslint+prettier自动格式化配置

注意:注意: 以下基于手动创建eslint配置

一、初始化eslint

首先通过命令创建.eslintrc.js文件。 执行:

eslint --init     
  1. 选择第三项 检查语法、发现问题并强制执行代码风格 如【图一】

  2. 我们使用JavaScript 模块(导入/导出)如【图二】

  3. 选择自己的一个模版语言。这里用的是react 如【图三】

  4. 集成ts。如【图四】

  5. 选择在浏览器中运行。如【图五】

  6. 是否使用流行风格 如【图六】

  7. 使用哪一种风格?这里使用airbnb 如【图七】

  8. 以何种格式输出配置文件? 这里是用js

  9. 是否下载依赖? 选择是

  10. 下载完成并生成.eslintrc.js

  11. 生成之后我们可以自定义一下配置 如下

会自动安装下方依赖

eslint-plugin-import@2.25.4
eslint-plugin-jsx-a11y@6.5.1
eslint-config-airbnb@19.0.4
eslint-plugin-react@7.28.0
eslint@8.8.0
eslint-plugin-react-hooks@4.3.0
@typescript-eslint/parser@5.11.0
@typescript-eslint/eslint-plugin@5.11.0

   module.exports = {
      root: true,
      env: {
        node: true,
        browser: true,
        es6: true,
      },
      parserOptions: {
        ecmaFeatures: {
          jsx: true,
        },
        ecmaVersion: 12,
        sourceType: 'module',
        project: './tsconfig.json',
      },
      plugins: ['react', 'react-hooks', '@typescript-eslint'],
      extends: ['plugin:react/recommended', 'airbnb'],
      parser: '@typescript-eslint/parser',
      rules: {
        // 禁止使用 var
        'no-var': 'error',
        // 优先使用 interface 而不是 type
        '@typescript-eslint/consistent-type-definitions': ['error', 'interface'],
        '@typescript-eslint/no-explicit-any': 'off',
        '@typescript-eslint/explicit-module-boundary-types': 'off',
        'react-hooks/rules-of-hooks': 'error',
        'react-hooks/exhaustive-deps': 'warn',
        'react/prop-types': 'off',
      },
    };

[图一] image.png [图二]

image.png

[图三] image.png

[图四] image.png

[图五] image.png

[图六] image.png

[图7] image.png

[图8] image.png

[图9]

image.png

二、安装插件

vscode+eslint 基本上是我们每一个猿人必备的了 不用vscode请略过

下面就vscode根据eslint+prettier 自动格式化记一个随笔

首先我们要安装eslint 然后我们需要安装prettier工具

image.png

下载完之后我们需要一个配置,这个配置可以让我们在chrl+s的时候自动格式化代码。

三、配置vscode

打开vscode的 settings-> default formatter 勾选咱们的prettier 工作区和用户区都要选择哦。

好了 我们安装完成了。但是有时prettier和eslint会有一些小冲突,这个时候就需要我们手动去指定规则(使用eslint的还是prettier的规则)

image.png

四、 解决冲突

那我们如何解决这个冲突呢?有两种方法

  1. 在我的 .eslintrc.js 文件中配置prettier 如下。 如果想看详细的一个配置请看我上一篇 自我沉淀webpack5+react+eslint+tslint

.eslintrc.js 文件中在plugins中加入 'prettier'

   const path = require('path');
    module.exports = {
      root: true,
      env: {
        node: true,
        browser: true,
        es6: true,
      },
      parserOptions: {
        ecmaFeatures: {
          jsx: true,
          tsx: true,
        },
        ecmaVersion: 12,
        sourceType: 'module',
        project: ['./tsconfig.json'],
      },
      plugins: ['prettier', 'react', 'react-hooks', '@typescript-eslint'],
      extends: ['plugin:react/recommended', 'airbnb'],
      parser: '@typescript-eslint/parser',
      rules: {
        'import/no-unresolved': 'off',
        'import/no-unresolved': 'off',
        'no-nested-ternary': 'off',
        'react/jsx-filename-extension': 'off',
        'import/extensions': 'off',
        // 禁止使用 var
        'no-var': 'error',
        // 优先使用 interface 而不是 type
        '@typescript-eslint/consistent-type-definitions': ['error', 'interface'],
        '@typescript-eslint/no-explicit-any': 'off',
        '@typescript-eslint/explicit-module-boundary-types': 'off',
        'react-hooks/rules-of-hooks': 'error',
        'react-hooks/exhaustive-deps': 'warn',
        'react/prop-types': 'off',
      },
    };

再创建 .prettierrc 文件,书写规则,然后在eslint中将冲突的语法禁掉

内容如下 以下内容只是其中一小部分详情请查阅 prettier.io/ 代码如下

  {
  "singleQuote": true,
  "trailingComma": "all",
  "printWidth": 80,
  "object-curly-newline": false,
  "no-nested-ternary": false,
  "operator-linebreak": true,
  "global-require": false,
  "overrides": [
    {
      "files": ".prettierrc",
      "options": {
        "parser": "json"
      }
    }
  ]
}

webpack5 如何配置eslint+prettier

好啦大功告成~~~~~