VScode格式化ESlint方法(最全最好用方法)

简介

ESLint是一个可插入的静态代码分析工具，用于识别和报告模式中的问题。它是在 ECMAScript/JavaScript 代码中寻找问题的。代码分析是将源代码（特定于编程语言的）表示转换为一种表示，以便更容易分析代码并找到缺陷。

VScode是一款非常流行的轻量级代码编辑器，拥有丰富的插件生态系统。在VScode中使用ESLint可以帮助我们自动检查代码，从而避免在开发过程中出现一些潜在的bug。

在本文中，我们将教你如何在VScode中格式化ESLint，使你的代码更加规范易懂。

步骤

步骤一：安装ESLint插件并配置ESLint

首先打开VScode，点击左侧侧边栏中的扩展，搜索ESLint并安装。

接下来，我们需要配置VScode使用ESLint。打开你的项目，复制以下代码到 .eslintrc.js 文件中（如果还没有这个文件，请用你自己的规则文件替换这个文件）：

module.exports = {
  env: {
    browser: true,
    es6: true,
  },
  extends: ['eslint:recommended', 'plugin:react/recommended'],
  globals: {
    Atomics: 'readonly',
    SharedArrayBuffer: 'readonly',
  },
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 2018,
    sourceType: 'module',
  },
  plugins: ['react'],
  rules: {},
};

步骤二：安装插件prettier

Prettier是一个代码格式化的工具，可以帮助我们自动修复代码的格式。使用Prettier的优点是，它可以以一致的格式输出代码，消除不必要的空格和换行符以及其他不同开发团队之间存在的语法差异。

我们需要安装一个插件将Prettier集成到VScode中，可以直接在VScode插件市场搜索安装，或者在终端中输入以下命令进行安装：

npm install -g prettier

步骤三：配置Prettier

在项目根目录下创建.prettierrc.js文件，并复制以下代码：

module.exports = {
  bracketSpacing: true,
  jsxBracketSameLine: false,
  singleQuote: true,
  trailingComma: 'all',
  printWidth: 120,
  tabWidth: 2,
};

这是一个基本的Prettier配置文件，这里的代码风格只是一个示例，可以根据自己的需求进行修改。

步骤四：安装插件eslint-config-prettier

在.eslintrc.js文件中，一般定义了很多代码规则，这些规则可能与Prettier自带的一些规则相冲突。为了避免冲突，我们需要安装一个插件eslint-config-prettier，来禁用与Prettier冲突的ESLint规则。

在终端中输入以下命令进行安装：

npm install eslint-config-prettier

然后，在.eslintrc.js文件中的eslint配置中，扩展prettier规则，如下所示：

module.exports = {
    extends: [ 'plugin:prettier/recommended', ... ]
};

步骤五：完成配置

在VScode中打开你的项目，通过按键 Ctrl+Shift+P 打开命令窗口，输入format document with...，然后选择你希望的格式化程序。这样就实现了将Prettier与ESLint集成并格式化你的代码。

示例

示例一

以下是一段演示代码（format-1.jsx），用以演示如何结合ESLint和Prettier进行代码格式化。

import React, { Component } from 'react'
import PropTypes from 'prop-types'

class App extends Component {
  state = {
    count: 0
  }

  render () {
    const { count } = this.state
    return (
      <div
        className='App'
        onClick={() => {
          this.setState(({ count }) => ({ count: count + 1 }))
        }}
      >
        <p>{count}</p>
      </div>
    )
  }
}

App.propTypes = {
  children: PropTypes.oneOfType([
    PropTypes.element,
    PropTypes.arrayOf(PropTypes.element)
  ])
}

export default App

在VScode中打开这个文件，按下 Ctrl + Shift + P ，在命令窗口中输入 format document with… ，选择 Prettier，然后文件的代码格式就发生了改变：

import React, { Component } from 'react';
import PropTypes from 'prop-types';

class App extends Component {
  state = {
    count: 0,
  };

  render() {
    const { count } = this.state;
    return (
      <div
        className='App'
        onClick={() => {
          this.setState(({ count }) => ({ count: count + 1 }));
        }}
      >
        <p>{count}</p>
      </div>
    );
  }
}

App.propTypes = {
  children: PropTypes.oneOfType([
    PropTypes.element,
    PropTypes.arrayOf(PropTypes.element),
  ]),
};

export default App;

可以看到，Prettier将代码格式化为一致的风格，去掉了多余的空格和换行符。

示例二

以下是另一段演示代码（format-2.js），用以演示如何在VScode中进行代码格式化。

const obj = { a: 1, b: 2, c: 3 };
const arr = [1, 2, 3];

const sum = (a, b) => {
  return a + b;
};

console.log(sum(1, 2));

console.log(obj);

console.log(arr);

在VScode中打开这个文件，按下 Ctrl + Shift + P ，在命令窗口中输入 format document with… ，选择 ESLint+Prettier，然后文件的代码格式就发生了改变：

const obj = { a: 1, b: 2, c: 3 };
const arr = [1, 2, 3];

const sum = (a, b) => {
  return a + b;
};

console.log(sum(1, 2));

console.log(obj);

console.log(arr);

可以看到，ESLint检测到了错误的代码，标记了错误，并给予警告，同时Prettier将代码格式化为一致的风格，使代码更加易读。

总结

以上就是在VScode中格式化ESLint的完整攻略。使用ESLint+Prettier可以有效帮助我们检查代码并改善代码质量，规范代码格式，让我们的代码更加规范、易读和易于维护。