preface

When writing Vue project, use CLI to build the project, select ESLint+Prettier will automatically help us to configure, recently write code out of Webpack, want to standardize their own code format, search a lot of articles, mostly based on Webpack.

After a lot of hard work, I’ve finally come up with a way for the editor to format code in conjunction with ESLint without webPack. I’d like to share my implementation process with any interested developers who want to read this article.

Environment set up

This article uses WebStorm as the editor and YARN as the package management tool.

Install ESLint

Before I start, LET’s take a look at my project structure, which is a very simple JS project.

  • Initializes a project
After the execution, fill in the relevant information. After the initialization is successful, there will be an additional package.json file in the project root directory
yarn init
Copy the code
  • Install dependencies
Yarn. lock file will be added to the project root directory after the execution is complete
yarn install
Copy the code
  • Install ESLint
# Project root execution
yarn add eslint --dev
Copy the code
  • Initialize ESLint
# Project root execution
yarn eslint --init
# After execution, the following selection will appear
# How do you want to use ESLint, I choose second to verify code and solution➤ How would you like to use ESLint? The problems,What do I choose import/export for the project module
✔ What typeof modules does your project use? The esm,Which framework does the project use? I chose the third option not to use a framework➤ Which framework does your project use? None,If the project uses typescript, I select yesForeground Use TypeScript? No/Yes# Code runtime environment, I select browser and Node➤ Where does your code run? Browser, the node# ESlint configuration file format, I chose json configuration format
✔ What format do you want your config file to be in? JSON,Whether to install the following dependencies
The config that you've selected requires the following dependencies: @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest Right now with NPM? No/Yes, Successfully created. Eslintrc. Json file in/Users/likai/Documents/WebProject/JavaScript - test ✨ Done in 85.77 s.Copy the code
  • Install a plug-in for ESLint to support TypeScript
yarn add typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin --dev
Copy the code

After performing the above steps, the project directory looks like the following figure

Install the prettier

  • Installing a plug-in
yarn add prettier --dev
Copy the code
  • To configure the prettier rule for the project, create the. Prettierrc. json file in the root directory of the project, add the following code
{"printWidth": 160, // code character for each line "tabWidth": 4, // TAB length "useTabs": true, // Use TAB "singleQuote": False, // use single quotes instead of double quotes "semi": true, // delete the end comma "trailingComma": "none", // delete the end comma of the array "bracketSpacing": true // space between braces}Copy the code

Configuration editor

Configuration ESLint

  • Open the WebStorm Settings panel and do the Settings as shown in the figure
  • Right-click on the ESLint configuration file and do as shown in the figure

Configuration is prettier

  • Open the WebStorm Settings panel and do the Settings as shown in the figure

Combines ESLint with prettier

ESLint alone requires many rules to be configured in its configuration file. Most of these rules are the default rules for prettier or we already have one for prettier, which can cause duplication and can be costly to maintain.

Fortunately, the plugin author thought of this and came up with a plugin called eslint-plugin-prettier. Install using subordinate commands

yarn add eslint-plugin-prettier --dev
Copy the code
  • Open the. Eslintrc. json file to add the prettier plug-in and rule rules
    "plugins": [
        "prettier"]."rules": {
        "prettier/prettier": "error"", // prettier, an error message is thrown"spaced-comment"A: [2,"always"] // Comments must be followed by two Spaces}Copy the code

After the preceding configurations are added, the following configurations can be omitted:

More configuration

ESLint and PRETtier ESLint and PRETtier ESLint and PRETtier

ESLint documentation: ESLint

Prettier Document: Prettier

Results of the test

Open any ts file and we’ll see that there’s already a hint about ESLint.

Test the automatic formatting code, as shown in the figure, after writing the code, press Ctrl+S to automatically format

Write in the last

  • Feel free to correct any mistakes in the comments section, and if this post helped you, feel free to like and follow 😊
  • This article was originally published in Nuggets and cannot be reproduced without permission at 💌