preface

When we are developing a project, we often encounter a situation where we only change a few lines of code, but before we finally submit it, we find that a lot of changes have been made, and sometimes we pull down the code, in our IDE, there are a lot of warnings, because the code is not standardized. In fact, the lack of a unified specification, let me share a development project to configure a suitable for collaborative specification of the code formatting configuration scheme, go ~~~

What is ESlint

Liverpoolfc.tv: eslint.bootcss.com/

According to the official website, it is an assembler JavaScript and JSX checker, official is official… Say very official…. 🤦🏻♀️ Let me tell you,ESlint helps us standardize some code writing conventions. What is this specification? For example, if a string has a single quotation mark at the end of the code; And so on and so forth, it helps us unify and have a unified writing style in the project,OK, without further ado, here we go

ESlint configuration

  1. Initialize a project. Here I use Koa as an example
mkdir eslint-test
cd eslint-test
npm init -y
npm i koa
touch index.js
Copy the code

Now the directory is as follows

.├ ── index.js ├─ ├─ package-lock.json ├─ download.txtCopy the code

And then let’s write some Koa code

// index.js
const Koa = require("koa");
const app = new Koa();

// response
app.use(ctx => {
  ctx.body = 'Hello Koa';
});

app.listen(3000);
Copy the code

Ok, the project is basically set up 👆🏻

  1. Install ESlint and run it
npm i eslint -D
npx eslint --init
Copy the code
  1. Configuring ESlint(Important)

How do I use ESlint?

We chose to check syntax, find problems, and enforce code style

Which module is used to introduce the form?

We choose CommonJS

Which framework is used?

Here we are using Koa, so the choice is not one of these

Do you use TS in your project?

Select NO

What environment does your project run in?

Select the Node

How do you want to define your code style in your project?

Use popular solutions

Which code style are you going to choose?

Let’s take Airbnb as an example

What format is your ESlint configuration file?

We can just select JavasScript

Should you install the dependencies through NPM now?

YES~

Then we started to install the dependencies based on our configuration and generated an ESlint configuration file

Then we execute it on the command line

npx eslint . --fix
Copy the code

Perform before

After performing

The code is automatically fixed 👌

Although it is possible to change the format of the code through commands, if you want to find the problem directly while writing the code, you need to install a vscode plug-in

After installation

At this point, when writing code we can find our code style problems 👏

In fact, we can be even lazier, we save the file automatically help us to repair, wouldn’t that be beautiful?

Here we need to modify settings.json in vscode

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

Here is our own editor with the save autofix function, if we give our project to other colleagues and ask them to save the autofix, we can add the above configuration to the project root directory by adding vscode configuration file

So easy to use the function, how can not share ~

What is Prettier

So what is Prettier when we talked about ESlint? ESlint does two things: fix the quality of the code, and fix the format, but ESlint’s format isn’t thorough enough, isn’t overly coercive, doesn’t have its own style, of course, a standard style, so Prettier is needed to enforce it

Prettier configuration

Liverpoolfc.tv: prettier. IO /

Install the Prettier plug-in

Project we install

npm i prettier -D
Copy the code

Prettierrc, “prettierrc”, “prettierrc”, “prettierrc”, “prettierrc”, “prettierrc”, “prettierrc”, “prettierrc

{
  "useTabs": false,
  "tabWidth": 2,
  "printWidth": 100,
  "singleQuote": true,
  "trailingComma": "none",
  "bracketSpacing": true,
  "semi": false
}
Copy the code
PrintWidth: 100, // More than the maximum newline tabWidth: 4, // The number of bytes indented useTabs: false, // Instead of using TAB, use space semi: ProseWrap: "preserve", // Default value. ArrowParens: "avoid", // (x) => {} Whether the arrow function should have parentheses when it has only one argument. // Place Spaces between objects, array brackets and text "{foo: bar}" disableLanguages: ["vue"], // Do not format vue file, vue file formatting separately set endOfLine: "auto", // end is \n\r \n\r auto eslintIntegration: False, / / no prettier use validated code format eslint htmlWhitespaceSensitivity: "ignore", ignorePath: ".prettierIgnore ", // Fill in the. Prettier ignore file of the project without prettier formatting: JsxSingleQuote: false, // jsxSingleQuote: false, // JSX use single quotes instead of double quotes. Parser: "Babylon ", // Formatted parser, default to Babylon requireConfig: false, // Require a 'prettierconfig' to format prettier stylelintIntegration: // Stop prettier from using stylelint's code format to check trailingComma: "ES5" // Whether to add a comma after the last element of an object or array False // Don't let Prettier use tsLint's code format for validationCopy the code

Format project all file code

npx prettier --write .
Copy the code

How come the code I just formatted with ESlint is reporting errors? There is a conflict between ESlint and Prettier

Resolution of the conflict between ESlint and Prettier

  1. 13. Turn off the ESlint format configuration that conflicts with Prettier and useeslint-config-prettierThis plugin
npm i eslint-config-prettier -D
Copy the code

Then add the PertTier extension to.eslintrc.js

// .eslintrc.js module.exports = { env: { commonjs: true, es2021: true, node: true }, extends: ['airbnb-base', 'prettier'], // Override esLint format configuration, write last parserOptions: {ecmaVersion: 13}, rules: {}}Copy the code

Prettier now takes over formatting, but we still want ESlint to save Prettier automatically, we need ESlint to fix Prettier, requiring eslint-plugin-prettier configuration

npm i eslint-plugin-prettier -D
Copy the code
Eslintrc.js module.exports = {env: {commonjs: true, es2021: true, node: true}, extends: [' reality - base ', 'the plugin: prettier/it'], / / cover eslint format configuration, written in the last parserOptions: {ecmaVersion: 13}}Copy the code

Here ESlint and Prettier are done, as are other projects like Vue and React, so we can create our own code style

Code: github.com/wykun1120/e…