Use eslint and prettier to make cross-IDE collaboration more comfortable

TL; DR

• With eslint and prettier, code quality optimization and cross-IDE collaboration can be performed
• Install plugins and npm packages to use eslint and prettier smoothly
• Prepare configuration files .eslintrc.js and .prettierrc.js (can be generated with the help of tools or handwritten)
• Improve efficiency and enable the automatic formatting function of the IDE to save
• Use npm to manage eslint and prettier configuration more conveniently

Scenes

previously explained the difference between eslint and prettier , this time it is to solve the problem of collaboration between VScode and jetbrains IDE.

Jetbrains will automatically align to the length of the label name if an attribute is added after the html tag name is entered, but if it is directly wrapped without an attribute, it will be positioned to the normal indentation position. The first case is el-select as shown in the figure below. The second case is el-option , even if the IDE format is used again, it is formatted according to this "setting".

But there is no way to configure this indentation in vscode. To balance the two IDEs and the uniform format of all developers, it is natural to think of eslint and prettier, which are also very commonly used code management tools in front-end projects. .

There is a small question here, is eslint not enough? In some cases, it is not enough. Although eslint can also control the code format, it is an ES lint... He does not care about the indentation of the template part in the Vue file, so if the requirement is for the collaboration of vsc and jb, eslint alone is not enough. The template part Rely on prettier to unify. If you use vsc, there is no big problem in a short time, but with the upgrade of vsc version, the formatting algorithm may be modified, so it is more reliable to add a prettier.

Install plugin

vscode

Find these two on the plug-in page:

• Prettier - Code formatter
• ESLint

webstorm

webstorm comes with eslint, prettier can be searched and installed in settings-plugins (ws seems to have prettier installed by default).

• https://www.jetbrains.com/help/webstorm/eslint.html
• https://www.jetbrains.com/help/webstorm/prettier.html

Install the core program

IDE plug-ins do not contain the core algorithms of the two formatters, but only provide a bridge to communicate with the IDE. Their operation depends on the programs in the node_modules directory, so the npm package installation is a must.

npm install --save-dev eslint eslint-plugin-vue prettier

Among them, eslint-plugin-vue is a Vue-specific lint rule, and there will be corresponding react.

And also need to install the corresponding plug-ins in both IDEs

The path of the prettier can be set in the settings:

Initial configuration

eslint

ESLint does both traditional linting (looking for problematic patterns) and style checking (enforcement of conventions). You can use ESLint for everything, or you can combine both using Prettier to format your code and ESLint to catch possible errors.

npx eslint --init

It is recommended to select To check syntax, find problems, and enforce code style all three of them directly.

Of course, js is recommended as the output format, which is managed by eslint itself, and the output result can be customized according to the program.

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  extends: ['eslint:recommended', 'plugin:vue/essential'],
  parserOptions: {
    ecmaVersion: 13,
    sourceType: 'module',
  },
  plugins: ['vue'],
  rules: {
    indent: ['error', 2],
    'linebreak-style': ['error', 'windows'],
    quotes: ['error', 'single'],
    semi: ['error', 'never'],
  },
}

It seems that there are very few configurations, but they are actually condensed in the preset rule set extends

<!-- Will const be accelerated-->

prettier

playground that comes with the official website can help you generate a json file. Once you get it, you can directly create a new js file and use module.exports = output it.

A detailed explanation of all optional configurations can be found here https://prettier.io/docs/en/options.html

module.exports = {
  arrowParens: 'always',
  bracketSameLine: true,
  bracketSpacing: true,
  embeddedLanguageFormatting: 'auto',
  htmlWhitespaceSensitivity: 'css',
  insertPragma: false,
  jsxSingleQuote: false,
  printWidth: 80,
  proseWrap: 'preserve',
  quoteProps: 'as-needed',
  requirePragma: false,
  semi: false,
  singleQuote: true,
  tabWidth: 2,
  trailingComma: 'es5',
  useTabs: false,
  vueIndentScriptAndStyle: false,
}

other problems

The conflict between prettier and eslint

Sometimes the rules of prettier and eslint conflict. Prettier official website has a related topic describing this problem, but I personally think that there is no need to add additional compatible software, because the prettier configuration is inherently small, and manual compatibility is not difficult. Add these tools It may increase the maintenance burden.

For example, the default generated eslint rules are switch from the prettier rules when formatting 06188ee2d93c08, but the prettier is not detailed to control the switch , so you need to change eslint to accommodate prettier: indent: [2, 2, { SwitchCase: 1 }],

Auto format

Although the shortcut keys are very convenient, they are not as straightforward as a ctrl S.

webstorm can search the save behavior in settings, check eslint and prettier.

vscode can write this configuration directly (the default formatting tool uses prettier):

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

Submit for inspection

project did not use the code formatting tool when the project was established, and the project that was later connected does not need to be submitted for inspection immediately, and the progressive modification can be

Using husky can help us run some scripts to check code quality or code testing before submitting.

The installation process is probably npx husky-init after initializing the installation of husky dependencies, add the lint command to the package.json file.

{
  "scripts": {
    "lint": "node ./node_modules/eslint/bin/eslint.js --ext .vue,.js src",
    "fix": "node ./node_modules/eslint/bin/eslint.js --ext .vue,.js src --fix",
    "prepare": "husky install"
  }
}

Then add npm run lint to the pre-commit file in the .husky folder, you can run eslint before submitting, and you cannot submit code when it fails.

Configuration sharing

Generally speaking, a team can share a set of configurations for all projects. You can skip the step of generating configuration by directly copying the configuration file sharing. It is more convenient to manage and configure the npm, like the following (similar to eslint):

module.exports = {
  ...require('@company/prettier-config'),
  semi: false,
}

expand

Discussion on the working principle of

Original link: https://ssshooter.com/2021-11-05-eslint-and-prettier2/