zoukankan      html  css  js  c++  java
  • vscode自动修复eslint规范的插件及配置

    在开发大型项目中,经常都是需要多人合作的。相信大家一定都非常头疼于修改别人的代码的吧,而合理的使用eslint规范可以让我们在代码review时变得轻松,也可以让我们在修改小伙伴们的代码的时候会更加清晰。但是往往在开发过程中由于我们个人习惯的不通经常会先关掉一些eslint的属性,又或者每个人对于eslint的配置也是不一样的,所以当我们统一配置eslint之后,我们可以通过vscode或者webstorm插件配置eslint规范,自动修改关于eslint的问题。

    一、eslint规范

    使用vue-cli3搭建vue项目初始化时,会有选择eslint的设置,一般情况下,设置使用 'eslint:recommended',也可以在.eslintrc.js配置其他觉得适合项目的一些eslint规范(详细eslint规则参考:https://cn.eslint.org/docs/rules/):

    module.exports = {
      root: true,
      env: {
        node: true,
      },
      extends: [
        'plugin:vue/essential',
        '@vue/airbnb',
        'eslint:recommended'
      ],
      rules: {
        'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
        'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
        'no-trailing-spaces': 'error', // 禁止行尾空格
        'linebreak-style': [0, 'error', 'windows'],
        'import/extensions': 'off',
        "comma-dangle": ["error", "never"], // 禁止行尾逗号
        "semi": ["error", "never"], // 禁止分号
        "space-before-blocks": "error", // 强制在块之前使用一致的空格
        "comma-spacing": "error", // 逗号后面加空格
        'indent': [2, 2, {
          'SwitchCase': 1
        }], //代码首行缩进规定,switchcase的设置比较特别,如果直接设置'indent':2,使用代码自动校验会发现switch代码段无法校验通过
      },
      parserOptions: {
        parser: 'babel-eslint',
      },
    };

     二、自动修复eslint报错

    vscode安装插件vetur,prettier,eslint配置相对应的eslint规范可自动帮我们修复一些eslint报错问题,以下是一些基本的配置:

      "vetur.format.defaultFormatter.js": "prettier-eslint",
      "vetur.format.defaultFormatter.html": "js-beautify-html",
      "vetur.format.defaultFormatterOptions": {
        "wrap_attributes": "force-aligned"
      },
      "editor.detectIndentation": false,
      // 重新设定tabsize
      "editor.tabSize": 2,
      // "editor.formatOnSave": true,  // 保存时自动格式化 --vscode编辑器自带自动格式化会与设置的eslint规范有所冲突导致eslint报错
      "eslint.autoFixOnSave": true, //保存时使用eslint规范自动格式化
      // 添加 vue 支持
      "eslint.validate": [
        "javascript",
        "javascriptreact",
        {
          "language": "vue",
          "autoFix": true
        }
      ],
      "prettier.eslintIntegration": true, // 让prettier使用eslint的代码格式进行校验 (如果未安装prettier或者不需要prettier格式化可以不用设置prettier这些属性)
      "prettier.semi": false,  // 去掉代码结尾的分号 
      "prettier.singleQuote": true,  // 使用带引号替代双引号 

    收藏:https://www.haorooms.com/post/vscode_eslint

  • 相关阅读:
    理解SQL SERVER中非聚集索引的覆盖,连接,交叉和过滤
    TSQL查询进阶流程控制语句
    效率最高的Excel数据导入(c#调用SSIS Package将数据库数据导入到Excel文件中【附源代码下载】)
    SQL Service自定义数据类型
    理解SQL SERVER中的逻辑读,预读和物理读
    TSQL查询进阶深入理解子查询
    SQL查询入门(下篇)
    使用SQL进行递归查询
    利用 sys.sysprocesses 检查 Sql Server的阻塞和死锁
    灵活运用 SQL SERVER FOR XML PATH
  • 原文地址:https://www.cnblogs.com/layaling/p/10821529.html
Copyright © 2011-2022 走看看