introduce

Javascript is a weakly typed language, so syntax checking is especially important. While there are a number of front-end IDE development tools that can be a great way to alert us to errors at authoring time, most developers use lightweight editors like Sublime Text and Visual Studio Code, which can lead to errors such as spelling errors. Missing parentheses, etc. And everyone’s code writing habits are not the same, so some project code formats vary greatly, such as the number of indented Spaces, some habits of 4, some habits of 2, which also leads to more and more trouble to maintain the project, it is difficult to locate errors. As a result, tools for checking Javascript syntax came into being, and ESLint is the most widely used tool today. This article will show you how to integrate ESLint into our project.

use

Formatting code after configuration (Alt + Shift + F) also fixes minor problems automatically. VSCode can be directly set to save automatic formatting.

VSCode global Settings

Add the following Settings to VSCode settings.json file:

There may be duplicates of your original setup, so choose your own

{ "workbench.startupEditor": "newUntitledFile", "workbench.statusBar.visible": true, "workbench.colorTheme": "One Dark Pro", "breadcrumbs. Enabled ": true, "editor.fontSize": 13, "window.zoomLevel": 0.6, "workbench.iconTheme": "vscode-icons", "vsicons.dontShowNewVersionMessage": true, "typescript.updateImportsOnFileMove.enabled": "always", "files.associations": { "*.nvue": "vue", "*.json": "bat" }, "vetur.validation.script": false, "vetur.validation.template": false, "vetur.validation.style": false, "diffEditor.ignoreTrimWhitespace": false, "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"], "editor.defaultFormatter": "esbenp.prettier-vscode", "iceworks.materialSources": [], // "eslint.enable": false, }Copy the code

ESLint Settings in the project

.eslintrc.js:

const allExtensions = ['.ts', '.tsx', '.d.ts', '.js', '.jsx', '.vue'];

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: ['plugin:vue/essential', 'eslint:recommended', '@vue/prettier'],
  parserOptions: {
    parser: 'babel-eslint',
  },
  plugins: ['import'],
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn': 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn': 'off',
    'no-unused-vars': 'warn',

    'import/order': ['warn', {
      'newlines-between': 'always',
      alphabetize: {
        order: 'asc'
      }
    }],
    'import/first': 'warn',
    'import/newline-after-import': ['warn', {
      count: 1
    }],
    'import/no-cycle': 'warn',
  },
  settings: {
    'import/extensions': allExtensions,
    'import/external-module-folders': ['node_modules'],
    'import/resolver': {
      node: {
        extensions: allExtensions,
      },
      webpack: {
        config: './node_modules/@vue/cli-service/webpack.config.js',
      },
    },
  },
};
Copy the code

The Prettier setting in the project

prettier.config.js:

module.exports = {
  semi: true,
  singleQuote: true,
  trailingComma: 'es5',
  arrowParens: 'always',
  printWidth: 120,
};
Copy the code

Project dependency correlation

"DevDependencies" : {" @ vue/cli - plugin - Babel ":" ~ 4.5.0 ", "@ vue/cli - plugin - eslint" : "~ 4.5.0", "@ vue/cli - service" : "~ 4.5.0 @", "vue/compiler - the SFC" : "^ 3.0.0", "@ vue/eslint - config - prettier" : "^ 6.0.0", "Babel - eslint" : "^ 10.1.0", "eslint" : "^6.7.2", "eslint-import-resolver-webpack": "^0.13.0", "eslint-plugin-import": "^2.22.1", "eslint-plugin-import": "^ 3.1.3 eslint - plugin -", "vue" : "^ 6.2.2", "prettier" : "^ 1.19.1", "node - sass" : "^ 4.14.1", "sass - loader" : "^ 7.0.1"},Copy the code