vscode配置eslint(vue项目)

708 阅读1分钟
  1. 安装eslint插件
  2. 安装相关依赖
npm i eslint babel-eslint eslint-plugin-babel  eslint-plugin-vue  

3.设置eslint为格式化工具

image.png 4. 在vscode设置中打开setting.js,配置如下

{
    "eslint.format.enable": true,
    "[vue]": {
        "editor.defaultFormatter": "dbaeumer.vscode-eslint"
        // "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    "eslint.options": {
        "extensions": [
            ".js",
            ".vue"
        ]
    },
    "eslint.validate": [
        "javascript",
        "html",
        "vue"
    ],
    "[javascript]": {
        "editor.defaultFormatter": "dbaeumer.vscode-eslint"
    },
}

5.配置.eslintrc.js文件

module.exports = {
  extends: [
    'plugin:vue/strongly-recommended',
    'plugin:vue/recommended'
  ],
  plugins: [
    'eslint-plugin-vue'
  ],
  root: true,
  rules: {
    'vue/html-indent': ['error', 4]
  }
}

需要什么特殊的规则,在rules中加入即可。