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

2021-09-14 20:31 3729

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

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

一、初始化eslint

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

eslint --init

选择第三项检查语法、发现问题并强制执行代码风格如【图一】
我们使用JavaScript 模块（导入/导出）如【图二】
选择自己的一个模版语言。这里用的是react 如【图三】
集成ts。如【图四】
选择在浏览器中运行。如【图五】
是否使用流行风格如【图六】
使用哪一种风格？这里使用airbnb 如【图七】
以何种格式输出配置文件？这里是用js
是否下载依赖？选择是
下载完成并生成.eslintrc.js
生成之后我们可以自定义一下配置如下

会自动安装下方依赖

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',
      },
    };

[图一] [图二]

[图三]

[图四]

[图五]

[图六]

[图7]

[图8]

[图9]

二、安装插件

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

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

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

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

三、配置vscode

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

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

四、解决冲突

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

在我的 .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"
      }
    }
  ]
}