This chapter mainly introduces ESLint and its configuration. Prettier and stylelint are used together in the following chapters, hoping to master and understand the use of code formatting configuration after project initialization

Initialization of ESLint

Let’s start with a step-by-step analysis of the ESLint configuration in the project, initialize the project using VUe3, and install ESLint once the project is initialized

npm i eslint -D
Copy the code

Add the configuration file. Eslintrc.js. The file is empty.

Use in projects

// main.js
import { createApp } from 'vue' 
import App from './App.vue'

createApp(App).mount('#app')
Copy the code

Parsing error: The keyword ‘import’ is reservedesLint error occurred in The import file madn.js, because ESLint needed to configure parserOptions to specify The language version and module type. This is where you learn the first configuration

// .eslintrc.js
module.exports = {
    parserOptions: { // Set parser options
        ecmaVersion: 2020.// the default is 3,5 (default). You can use 6, 7, 8, 9, or 10 to specify the version of ECMAScript you want to use. You can also specify 2015 (same as 6), 2016 (same as 7) using year names. Or 2017 (same as 8) or 2018 (same as 9) or 2019 (same as 10)
        sourceType: 'module' // Set to 'script' (default) or 'module' (if your code is an ECMAScript module).}}Copy the code

After saving, the above main.js will not report red.

The second configuration rules is used when you want to configure esLint rules yourself. See eslint-rules. Here we use no-var as an example

// main.ts
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
var a = 1
console.log('11',a)
Copy the code

There is no red here when ESLint is not configured, now we set rules.

// .eslintrc.js
module.exports = {
    parserOptions: {
        ecmaVersion: 2020.sourceType: 'module'
    },
    rules: {
        'no-var': ['error']}}Copy the code

Unexpected var, use let or const ininstead. Eslint (no-var) Unexpected var, use let or const ininstead. There are many configurations that can be used in a project and we don’t have to configure each one. Instead, we can use an existing configuration such as recommended, which uses the third configuration extends, which can be either a string or an array of strings in which case each configuration inherits the previous configuration.

// .eslintrc.js
module.exports = {
    extends: ['eslint:recommended'].parserOptions: {
        ecmaVersion: 2020.sourceType: 'module'
    },
    rules: {
        'no-var': ['error'].}}Copy the code

Eslint :’ module’ is not defined. Eslint :’ module’ is not defined. Eslint :’ module’ is not defined.

The fourth configuration is used hereenv: Specifies the environment, an environment defines a set of predefined global variables, set tonodeCan.

// .eslintrc.js
module.exports = {
    extends: ['eslint:recommended'].parserOptions: {
        ecmaVersion: 2020.sourceType: 'module'
    },
    env: {node: true
    },
    rules: {
        'no-var': ['error']}}Copy the code

Modify the main.js file

// main.js
import { createApp } from 'vue'
import App from   './App.vue'
createApp(App).mount('#app')
var a = 1;;;
console.log('11',a)
Copy the code

Save in “;;;” Eslint (no-extra-semi) error warning Unnecessary semicolon.eslint (no-extra-semi) If the rules we want need to adjust individually, we can modify the rules in the configuration file.

// .eslintrc.js
module.exports = {
    extends: ['eslint:recommended'].parserOptions: {
        ecmaVersion: 2020.sourceType: 'module'
    },
    env: {node: true
    },
    rules: {
        'no-var': ['error'].'no-extra-semi': ['off'] // Turn off verification without a semicolon}}Copy the code

When I go to main.js, I find only no-var error. For the demonstration, no-extra-semi is turned on first.

Eslint repair

Start with two esLint commands:

  • --extESLint: This option allows you to specify the file extension to use when looking for JavaScript files in the specified directory. By default, it uses.jsAs a unique file extension
  • --fix: This option instructs ESLint to try to fix as many problems as possible

Json and write the command “eslint”: “eslint –fix./ SRC — ext.js “where — ext.js can be left out, default js file.

Var a = 1;; Let a = 1; This fixes esLint errors, but it’s too cumbersome to run commands every time, so you can use VSCode to configure the save and fix in the configuration file. First open the configuration file settings.json, and you can use command + to search for JSON in the open page

In this file, set save automatic repair can be.

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

Write your own configuration file

Generate your own ESLint configuration file by referring to the NPM release

// package.json
{
  "name": "@nnnni/eslint-config-demo"."version": "1.0.0"."description": "A test ESLint"."main": "index.js"."scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git"."url": "[email protected]:niuben999/vue-eslint-config.git"
  },
  "author": "niuben"."license": "ISC"
}

Copy the code
// index.js
module.exports = {
    rules: {
        'no-console': 'error'}}Copy the code

After a successful release, use this configuration in your project.

Here we use our own configuration file, first imported

npm i @nnnni/eslint-config-demo -D
Copy the code

Then extend it in the configuration file

// .eslintrc.js
module.exports = {
    extends: ['@nnnni/demo'].// @nnni /eslint-config-demo can be shortened to @nnni /demo
}
Copy the code

After the configuration file is saved, console.log(’11’,a) is displayed in red, indicating that the configuration file is effective.