使用Eslint

Eslint 是 javascript 代码检测工具。
中文文档

本地安装

npm install eslint --save-dev

初始化

// linux 和 unix
./node_modules/.bin/eslint --init

// window 
.\node_modules\.bin\eslint --init

// 或者 
npx eslint --init

阮一峰：npx 使用教程

安装选项

? How would you like to use ESLint? // 如何使用 ESLint
  To check syntax only // 只检查语法
> To check syntax and find problems // 检查语法和发现问题
  To check syntax, find problems, and enforce code style // 检查语法、发现问题和执行代码风格

? What type of modules does your project use? // 项目使用什么类型的模块
> JavaScript modules (import/export)
  CommonJS (require/exports)
  None of these

? Which framework does your project use? // 项目使用哪个框架
  React
> Vue.js
  None of these

Does your project use TypeScript?(Y/n) 项目是否使用 TypeScript

? Where does your code run?  // 你的代码运行在哪里
>(*) Browser
 ( ) Node

? What format do you want your config file to be in?  // 你想要什么格式的配置文件
> JavaScript
  YAML
  JSON

eslint-plugin-vue@latest
? Would you like to install them now with npm? (Y/n) // 是否安装 eslint-plugin-vue 插件

eslint-plugin-vue 插件文档

配置完之后，项目根目录会生成 .eslintrc

module.exports = {
    "env": { // 指定脚本的运行环境。每种环境都有一组特定的预定义全局变量
        "browser": true,
        "es6": true
    },
    "extends": [ // 规则继承
        // "eslint:recommended",
        "plugin:vue/essential"
    ],
    "globals": { // 脚本在执行期间访问的额外的全局变量
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly"
    },
    "parserOptions": { // 解析器选项
        "ecmaVersion": 11,
        "sourceType": "module"
    },
    "plugins": [ // 插件
        "vue"
    ],
    "rules": { // 启用的规则及其各自的错误级别
    }
};

设置忽略文件，在根目录下创建 .eslintignore 文件

/node_modules/*
/public/*

在VSCode扩展中安装ESLint

vscode-eslint使用方式