添加ESLINT配置文件.eslintrc.js，规范前端代码格式

胡桃夹夹子

已于 2023-03-14 15:21:36 修改

阅读量975

点赞数

分类专栏：前端文章标签： javascript 前端 vue.js

于 2021-01-07 18:36:57 首次发布

本文链接：https://blog.csdn.net/weixin_42050406/article/details/112317530

版权

前端专栏收录该内容

49 篇文章 0 订阅

订阅专栏

本文介绍了VSCode中针对Vue项目的ESLint配置，包括依赖包版本、.eslintrc.js文件的规则设置以及VSCode的settings.json配置。通过这些设置，可以实现代码风格统一、错误提示及自动修复等功能，提升开发效率。

摘要由CSDN通过智能技术生成

依赖：

"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"eslint-config-standard": "^13.0.1",
"eslint-plugin-import": "^2.18.2",
"eslint-plugin-node": "^9.1.0",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-standard": "^4.0.0",

vscode需安装：
在这里插入图片描述

.eslintrc.js文件配置

module.exports = {
  env: {
    browser: true,
    es6: true,
    node: true
  },
  extends: [
    'plugin:vue/essential',
    'standard',
    'plugin:vue/recommended'
  ],
  globals: {
    Atomics: 'readonly',
    SharedArrayBuffer: 'readonly',
    
  },
  parserOptions: {
    ecmaVersion: 2018
  },
  plugins: [
    'vue'
  ],
  rules: {
    'eqeqeq': 'off',
    'vue/no-v-html': 'off',
    'no-debugger': 'off',
    "vue/html-closing-bracket-newline": ["error", {
      "singleline": "never",
      "multiline": "always"
    }],
    "vue/singleline-html-element-content-newline": 'off',
    'vue/no-unused-components': 'off',
    'vue/require-default-prop': 'off',
    'no-unused-vars': 'off',
    'no-unused-vars': 'off',
    "vue/attribute-hyphenation": 'off',
    'vue/require-valid-default-prop': 'off',
    'no-tabs': 'off',
    'camelcase': 'off',
    'no-undef': 'off',
    'no-useless-escape': 'off',
    'no-control-regex' :'off',
    'vue/attribute-hyphenation': 'off',
    'vue/order-in-components': 'off',
    'vue/prop-name-casing': 'off',
    'vue/attribute-hyphenation': 'off',
    'no-self-assign': 'off',
    'vue/require-prop-types': 'off',
    "vue/max-attributes-per-line": ["error", {
      "singleline": 5,
      "multiline": {
        "max": 1,
        "allowFirstLine": false
      }
    }]
  }
}

vsvode配置：
setting.json

{
  "emmet.triggerExpansionOnTab": true,
  "editor.minimap.enabled": false,
  "workbench.activityBar.visible": true,
  "workbench.statusBar.visible": true,
  "window.menuBarVisibility": "default",
  "liveServer.settings.donotShowInfoMsg": true,
  "files.associations": {
    "*.cjson": "jsonc",
    "*.wxss": "css",
    "*.wxs": "javascript",
    "*.wpy": "vue"
  },
  "editor.tabSize": 2,
  "workbench.iconTheme": "vscode-icons",
  "vetur.validation.template": false,
  "vetur.format.defaultFormatter.js": "prettier",
  "prettier.singleQuote": true,
  "prettier.semi": false,
  "vsicons.dontShowNewVersionMessage": true,
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "explorer.confirmDelete": false,
  "[javascript]": {
    "editor.defaultFormatter": "vscode.typescript-language-features"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "vetur.validation.script": false,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.format.enable": true,
  "eslint.validate": [
    "javascript",
    "vue",
    "html"
  ],
  "explorer.confirmDragAndDrop": false,
  "extensions.autoCheckUpdates": false,
  "extensions.autoUpdate": false,
  "update.mode": "none",
  "update.enableWindowsBackgroundUpdates": false,
  "search.exclude": {
    "**/.cache": true,
    "**/*.code-search": false,
    "**/bower_components": false,
    "**/dist": true,
    "**/node_modelus": true,
    "**/node_modules": false
  },
  "window.zoomLevel": 0,
  "vetur.format.defaultFormatter.html": "prettier",
}