Using ESLint with VUe-CLI

Plug-in installation

Start by searching eslint and prettier in vscode plug-ins.

Nothing. These two have to pretend.

Plug-in profile

Eslint in the vscode plugin library is used to directly report errors to you when you write code. (IN VUe-CLI, ESLint reports errors in the browser)

Prettier is a code formatting plug-in for esLint that would otherwise spend hours editing without formatting at all.

We practice

Create a vue project [email protected]. For later versions, use create to create the project.
vue init webpack eslint_test
Copy the code

Select None in the esLint column so vue-CLI will download ESLint for you and do some basic configuration.

But it won’t set rules for you.

After downloading, the directory structure is as follows:

The file is introduced

There are two files that are very important.

. Eslintignore and. Eslintrc. Js

.eslintignore, by name, ignore some files. That is, rules specified in files are not checked by ESLint.

For example, there is no syntax check for files under /build/.

.eslintrc.js, is the root of what esLint can do. This file is used by both vue-cli eslint and vscode eslint.

Supplementary document

We have to create a. Prettierrc file in the root directory.

. Prettierrc: the configuration file where the prettier format is formatted. Json is recommended.

For example, if you configure the following styles.

{
  // Use semicolons
  "semi": true.// Use single quotes
  "singleQuote": true.// TAB takes two Spaces
  "tabWidth": 2
}
Copy the code

The formatting process should look like the following:

! (5)] [animation (imgbed-xia-2.oss-cn-hangzhou.aliyuncs.com/img/ animation (5). GIF)

Double quotation marks are automatically changed to single quotation marks, and unadded semicolons are automatically completed.

Eslint. Js configuration

As mentioned above,.eslintrc.js is the key file where ESLint works, so we’ll have to learn how to configure it.

If none is selected when installing ESLint, the.eslintrc.js file should look the same as below.

// https://eslint.org/docs/user-guide/configuring

module.exports = {
  root: true.parserOptions: {
    parser: 'babel-eslint'
  },
  env: {
    browser: true,},// https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
  // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
  extends: ['plugin:vue/essential'].// required to lint *.vue files
  plugins: [
    'vue'].// add your custom rules here
  rules: {
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'}}Copy the code

The most important module above is the Rules module. It’s for us to set some rules for ESLint.

For example, if I add a rule in rules ‘no-var’: [‘error’], then we can’t use var to define variables in the program.

You can only use let to define variables and const to define constants.

rules: {
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'.'no-var': ['error'],},Copy the code

For example, in the figure below, I wrote var a = 1; It just reported an error.

Others are similar. Rule:

 rules: {
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'.'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off'.// The trailing comma rule
    'comma-dangle': [
      'error',
      {
        arrays: 'always'.objects: 'always'.imports: 'never'.exports: 'never'.functions: 'never'],},// Disable the var rule
    'no-var': ['error'].// The semicolon must be used
    semi: ['error'.'always'].// Single quotation marks must be used
    quotes: ['error'.'single'].// Must be indent with two Spaces
    indent: ['error'.2],},Copy the code

The appendix website

Prettier website prettier. IO/docs/en/con…

Eslint website eslint.bootcss.com/docs/rules/

Airbnb 英 文 版 github.com/BingKui/jav…