vscode 配置nodejs项目的eslint

文章参考

1. webpack4.x eslint配置

问题描述

以前写的express 项目，没有使用eslint 约束，导致代码庞大之后，代码很难维护，看着也很不舒服，因此想对以前的项目用eslint 约束，提高开发效率

vscode 添加 eslint

1. 安装依赖

cnpm install --save-dev eslint eslint-loader babel-eslint eslint-friendly-formatter eslint-config-standard eslint-plugin-standard eslint-plugin-promise eslint-plugin-import eslint-plugin-node eslint-plugin-html eslint-config-airbnb-base

2. 安装 eslint 插件

3. vscode setting.json文件配置

{
     
  ...
  
  // eslint 插件起作用，可以利用插件格式化代码
  "eslint.run": "onSave",
  // 是否开启eslint检测
  "eslint.enable": true,
  "eslint.options": {
     
    "extensions": [".js", ".vue"]
  },
  // 配置 ESLint 检查的文件类型
  "eslint.validate": ["javascript", "javascriptreact", "vue", "html"],
  "editor.codeActionsOnSave": {
     
    // 保存的时候自动修复
    "source.fixAll.eslint": false
  },
  "[javascript]": {
     
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "eslint.alwaysShowStatus": true,
  "eslint.format.enable": false
}

eslint 插件起作用，可以利用插件格式化代码 "eslint.run": "onSave"

4. 添加 .eslintrc.js 配置文件

module.exports = {
     
  root: true, // 作用的目录是根目录
  extends: 'standard', // extends 指定eslint规范
  plugins: [
    'html' // 使用eslint-plugin-html
  ],
  parser: 'babel-eslint',
  parserOptions: {
     
    sourceType: 'module' // 按照模块的方式解析
  },
  env: {
     
    browser: true, // 开发环境配置表示可以使用浏览器的方法
    node: true, //
    es6: true
  },
  rules: {
      // 重新覆盖 extends: 'standard'的规则
    // 自定义的规则
    'linebreak-style': [0, 'error', 'windows'],
    // "indent": ['error', 4], // error类型，缩进4个空格
    indent: ['error', 2], // error类型，缩进2个空格
    'space-before-function-paren': 0, // 在函数左括号的前面是否有空格
    'eol-last': 0, // 不检测新文件末尾是否有空行
    // 'semi': ['error', 'always'], // 必须在语句后面加分号
    semi: ['error', 'never'], // 必须在语句后面不加分号
    // "quotes": ["error", "double"],// 字符串没有使用单引号
    quotes: ['error', 'single'], // 字符串没有使用单引号
    'no-console': ['error', {
      allow: ['log', 'warn'] }], // 允许使用console.log()
    'arrow-parens': 0,
    'no-new': 0// 允许使用 new 关键字
  }
}