Redux 代码规范校验：ESLint + Prettier-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，代码规范是非常重要的，它能够提高代码的可读性、可维护性和可扩展性。同时，为了保持团队协作的一致性，代码规范一般会制定成为约定俗成的技术规范。因此，我们需要一个工具来帮助我们进行代码规范的校验并指导我们符合规范地开发。在这里，我们将介绍 Redux 代码规范校验的两个工具：ESLint和Prettier。

什么是ESLint？

ESLint是JavaScript静态代码分析工具，它可以帮助我们检查代码中常见的编码错误和代码风格问题。其可以自定义各种规则，从而达到代码风格的规范化。ESLint支持JavaScript以及JSX。

什么是Prettier？

Prettier是一个代码格式化工具，它可以使代码自动遵循一致的格式。Prettier自动地格式化代码，不需要手动调整缩进、行的长度、括号位置等等。它支持多种语言，包括JavaScript、TypeScript、HTML、CSS等。

为什么要使用ESLint和Prettier？

在现代化的前端开发中，由于参与人员较多，有时代码风格的统一性才是关键，因此我们需要使用ESLint和Prettier。

ESLint的作用

帮助我们检查代码中常见的编码错误和代码风格问题。
提供大量的规则，支持自定义各种规则，定制化更高。
统一代码风格，便于在多人协作的开发中达成一致。

Prettier的作用

可以使代码自动遵循一致的格式。
不需要手动调整缩进、行的长度、括号位置等等，节省时间。
它支持多种语言，包括JavaScript、TypeScript、HTML、CSS等。

如何在Redux应用中使用ESLint和Prettier？

在创建Redux应用时，我们可以使用Create React App脚手架。在该脚手架中，已为我们配置好了ESLint和Prettier。如果你使用的是其他的脚手架，可以按照以下步骤进行集成。

步骤一：安装依赖

npm install -D eslint prettier eslint-plugin-react eslint-config-prettier \
eslint-plugin-prettier eslint-config-airbnb

步骤二：创建配置文件

创建.eslintrc文件

在工程根目录下新建.eslintrc.js文件，并写入以下内容：

module.exports = {
  extends: ["airbnb", "prettier", "plugin:react/recommended"],
  parser: "babel-eslint",
  parserOptions: {
    ecmaVersion: 2018,
    sourceType: "module",
    ecmaFeatures: {
      jsx: true
    }
  },
  env: {
    browser: true,
    es6: true,
    node: true,
    jest: true
  },
  plugins: ["import", "jsx-a11y", "react", "prettier"],
  rules: {
    "prettier/prettier": "error",
    "react/jsx-filename-extension": [1, { extensions: [".js", ".jsx"] }],
    "import/prefer-default-export": "off",
    "react/prop-types":"off",
    "no-console":"warn"
    // 具体规则可以自行增加
  }
};

创建.prettierrc文件

在工程根目录下新建.prettierrc.js文件，并写入以下内容：

module.exports = {
  printWidth: 80,
  semi: true,
  trailingComma: "es5",
  singleQuote: true,
  jsxBracketSameLine: true
};

步骤三：配置VSCode

如果我们使用的是VSCode编辑器，我们可以按照以下的步骤来让它支持我们的代码规范校验。

安装插件

ESLint

Prettier - Code formatter

配置文件

在VSCode的用户设置中，修改以下配置项：

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.autoFixOnSave": true,
  "editor.formatOnSave": true
}

示例代码

App.js

import React from "react";
import { connect } from "react-redux";
import "./App.css";

function App(props) {
  const { todos, addTodo } = props;
  const [text, setText] = React.useState("");

  const handleSubmit = e => {
    e.preventDefault();
    if (!text.trim()) {
      return;
    }
    addTodo({
      id: Math.random(),
      text: text.trim()
    });
    setText("");
  };

  const handleChange = e => {
    setText(e.target.value);
  };

  return (
    <div className="App">
      <form onSubmit={handleSubmit}>
        <input value={text} onChange={handleChange} />
        <button type="submit">Add Todo</button>
      </form>
      <ul>
        {todos.map(todo => {
          return <li key={todo.id}>{todo.text}</li>;
        })}
      </ul>
    </div>
  );
}

const mapStateToProps = state => {
  return {
    todos: state.todos
  };
};

const mapDispatchToProps = dispatch => {
  return {
    addTodo: todo => dispatch({ type: "ADD_TODO", payload: todo })
  };
};

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(App);

index.js

import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import { createStore } from "redux";
import App from "./App";
import "./index.css";
import * as serviceWorker from "./serviceWorker";

const initialState = {
  todos: []
};

function reducer(state = initialState, action) {
  switch (action.type) {
    case "ADD_TODO":
      return {
        todos: [...state.todos, action.payload]
      };
    default:
      return state;
  }
}

const store = createStore(reducer);

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById("root")
);

serviceWorker.unregister();

总结

在本文中，我们介绍了 Redux 代码规范校验的两个工具：ESLint和Prettier。我们可以根据项目需要自定义不同的规范。通过指定规范来保证代码的规范化和一致性。同时，在多人协作开发中，也能更好的提高工作效率和工作质量。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/659e8f4eadd4f0e0ff7756b0

Redux 代码规范校验：ESLint + Prettier