ESLint + Prettier: How to integrate Vue and React projects

Where lint + Prettier improves Code Quality Basic concepts describe the basic use of ESLint and Prettier, their main configuration, and their integration with VScode, as well as how to configure husky + lint-staged to run ESLint before committing code. This second article explains how to integrate ESLint and React in a project that uses Vue and React.

Vue

My own Vue project uses Vite + Vue3 + Typescript. There are some additional typescript-related configurations when configuring ESLint, just like any Vue project that doesn’t use TS.

EditorConfig

Let’s start with some of the editor configuration, such as indentation, which can be done manually in an editor you’re familiar with, or with the help of EditorConfig. It can make the editor styles of team members using different ides consistent through a configuration file. If you use VSCode, search the plug-in marketplace to install it. Then create the. Editorconfig file in the project root directory:

Charset = UTF-8 indent_style = space # indent style (TAB | space) indent_size = # 2 # end_of_line indentation size = lf control line type (lf | cr | CRLF) trim_trailing_whitespace = true line # remove any white space characters of the first Insert_final_newline = true # Always insert a newline at the end of the file [*.md] # indicates that the following rules apply only to md files max_line_length = off TRIM_trailing_whitespace = falseCopy the code

ESLint

Install dependencies:

npm i eslint -D
Copy the code

NPX eslint –init will have a series of questions and answers in the command line window, For example, the supported language (JS/TS), framework (Vue/React), runtime environment (Browser/Node), and recommended shared configuration(eslint-config-Airbnb-base) will eventually install corresponding dependencies:

"eslint-config-airbnb-base"."eslint-plugin-import"."eslint-plugin-vue"."@typescript-eslint/eslint-plugin"."@typescript-eslint/parser"
Copy the code

The.eslintrc.js file is automatically created in the project root directory:

module.exports = {
  env: {
    browser: true.es2021: true.node: true
  },
  extends: ['plugin:vue/essential'.'airbnb-base'].parserOptions: {
    ecmaVersion: 12.parser: '@typescript-eslint/parser'.sourceType: 'module'
  },
  plugins: ['vue'.'@typescript-eslint'].rules: {}}Copy the code

P.S. about Airbnb style.

Install the ESLint plugin in VScode marketplace. In settions.json:

 "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
 }
Copy the code

For husky and Lint-staged uses see ESLint + Prettier Improving Code Quality (I) : Relevant section on Basic Concepts.

Prettier

Prettier part Prettier part integration of Prettier with ESLint Improves code Quality Basic concept of the relevant part of the same, go here, don’t forget to ‘plugin: prettier/it as the last item added to the. Eslintrc. Js extends in the array.

Overview of configuration files

My main configuration files are as follows:

• .eslintrc.js

module.exports = {
  env: {
    browser: true.es2021: true.node: true
  },
  extends: ['plugin:vue/essential'.'airbnb-base'.'plugin:prettier/recommended'].parserOptions: {
    ecmaVersion: 12.parser: '@typescript-eslint/parser'.sourceType: 'module'
  },
  plugins: ['vue'.'@typescript-eslint'].rules: {
    'import/no-extraneous-dependencies': ['error', { devDependencies: true}].'import/extensions': [
      'error'.'ignorePackages',
      {
        js: 'never'.jsx: 'never'.ts: 'never'.tsx: 'never'}].'no-console': 'off'.'import/no-unresolved': 'off'.'no-plusplus': 'off'.'no-param-reassign': ['error', { props: false}},settings: {
    'import/resolver': {
      node: {
        extensions: ['.js'.'.jsx'.'.ts'.'.tsx']}}}}Copy the code

• .prettierrc

{
  "useTabs": false,
  "tabWidth": 2,
  "printWidth": 100,
  "singleQuote": true,
  "trailingComma": "none",
  "bracketSpacing": true,
  "semi": false
}
Copy the code

• .vscode/settings.json

{
  "editor.defaultFormatter": "esbenp.prettier-vscode"."editor.codeActionsOnSave": {
    "source.fixAll.eslint": true}}Copy the code

React

The project I create is a Typescript project created using the Creaet React App(CRA for short). CRA actually installs ESLint and some config, but it doesn’t have Typescript configuration, so you have to add it yourself. I had a lot of problems with it anyway, and there were a lot of articles on the web. And then it all worked out.

ESLint

To find out which lint-related packages CRA pre-installed, I created a test project, put eject in it, and saw the following dependencies installed:

    "eslint": "^ 7.11.0"."eslint-config-react-app": "^ 6.0.0"."eslint-plugin-flowtype": "^ 5.2.0." "."eslint-plugin-import": "^ 2.22.1"."eslint-plugin-jest": "^ 24.1.0"."eslint-plugin-jsx-a11y": "^ 6.3.1"."eslint-plugin-react": "^ 7.21.5"."eslint-plugin-react-hooks": "^ 4.2.0"."eslint-plugin-testing-library": "^ 3.9.2." "."eslint-webpack-plugin": "^ 2.5.2." ".Copy the code

The Create React app already has ESLint installed, so there is no need to install it. In addition, scaffolding also comes preinstalled with a shareable ESLint config called eslint-config-react-app, which contains some basic rules.

If you choose Typescript when creating templates with CRA, you also need to install the following dependencies to support TS:

• @typescript-eslint/eslint-plugin
• @typescript-eslint/parser
• eslint-config-airbnb-typescript
• eslint-config-airbnb

Then delete the eslintConfig section of package.json. Create the.eslintrc.js file in the project root directory:

module.exports = {
  "root": true."env": {
    "browser": true."commonjs": true."es6": true."jest": true
  },
  "extends": [
    "react-app".// Create React app is integrated
    "react-app/jest".// Create React app is integrated
    "eslint:recommended".// Create React app is installed and uses rules from ESLint that are recommened
    "plugin:react/recommended".// Create React app installed. Recommended React linting configs
    "plugin:@typescript-eslint/recommended".// Install @typescript-eslint/eslint-plugin manually
    "plugin:react-hooks/recommended".// Create React app installed, hooks related Lint config
    "plugin:prettier/recommended" // Install Prettier before adding, delete]."plugins": ["react"."@typescript-eslint"]."parser": "@typescript-eslint/parser".// Install @typescript-eslint/parser manually. This allows eslint to understand typescript syntax
  "parserOptions": {
    "ecmaVersion": 11."ecmaFeatures": {
      "jsx": true // Allows for the parsing of JSX
    },
    "sourceType": "module".// Allows for the use of imports
    "project": "./tsconfig.json"
  },
  "settings": {
    "react": {
      "pragma": "React"."version": "detect" // Tells eslint-plugin-react to automatically detect the version of React to use}},"rules": {
    "no-debugger": "off"."no-console": "off"."import/first": "error"."react/prop-types": "off"}}Copy the code

Prettier

Prettier part Prettier part integration of Prettier with ESLint Improves code Quality Basic concept of the relevant part of the same, go here, don’t forget to ‘plugin: prettier/it as the last item added to the. Eslintrc. Js extends in the array.

Prettier when you see an error, the version of ESLint installed in CRA is not compatible with Prettier, where there is no Prettier, but when you see an error, pasting the error message and doing a scientific web search will tell you the solution, upgrade ESLint:

yarn upgrade eslint
Copy the code

Overview of configuration files

.eslintrc.js is given above,.prettierrc can refer to vue.

• .vscode/setting.json

{
  "editor.defaultFormatter": "esbenp.prettier-vscode"."eslint.options": {
    "configFile": ".eslintrc.js"
  },
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true}}Copy the code

Sometimes the format does not take effect when vscode is saved, you can restart to try.

Later, I will upload the prepared Vue and React projects to Git. There should be two more articles on engineering these two projects. It’s not sorted out yet.

You are welcome to comment and point out your problems.

reference

• Build a standard Vue3. X project engineering environment hand in hand from 0
• Advanced linting with Create React App, Typescript, and ESLint
• Highly recommended: How to setup esLint for React typescript projects
• Eslint-config-react-app Recommended way of config integration with ESLint, TypeScript, Prettier, and VS Code
• How to add a custom ESLint configuration to a Create React App project
• Create-react-app-typescript uses ESLint and prettier for automatic formatting code