vscode eslint及格式化使用vscode作为编辑器开发时,常用eslint代码检测工具来统一规范小组内代码风格

前言

使用vscode作为编辑器开发时,常用eslint代码检测工具来统一规范小组内代码风格。上周在使用时出现了一些报错,查阅了一些资料,在此总结一些自己的使用经历。有疑问或者不对的地方,欢迎在留言区提出。

vetur

在说eslint之前来看看vetur的格式化,Vetur支持格式化html/css/scss/less/postcss/stylus/js/ts可以在VS Code config中选择每种语言的默认格式化程序vetur.format.defaultFormatter(对象)下定义了html/css/scss/less/postcss/stylus/js/ts文件的格式化程序

// 打开自动格式化
{
    "editor.formatOnSave": false,
}

{
  // vetur 默认按照prettier规则格式化
  "vetur.format.defaultFormatter.html": "prettyhtml",
  "vetur.format.defaultFormatter.js": "prettier"
}

prettier选项默认从user settings配置中读取

"vetur.format.defaultFormatterOptions": {
  // html格式化工具
  "prettyhtml": {
    // 单行宽度
    "printWidth": 100, 
    // 是否适用单引号
    "singleQuote": false 
  }
}

当在根目录创建.prettierrc文件会,Vetur会优先使用它。

Prettier配置项

在user settings中设置如下

"vetur.format.defaultFormatterOptions": {
    "prettier": {
      "singleQuote": true,
      "proseWrap": "never",
      "printWidth": 130
    }
  }

在.prettierrc文件中配置如下(使用的优先级更高)

{
 "singleQuote": true,
 "semi": false
}

eslint配置项

user settings 中配置

 "eslint.options": {
    "extensions": [
      ".html",
      ".js",
      ".vue",
      ".jsx"
    ]
  }

.eslintrc.js(优先级更高)

{
    "parserOptions": {
        "ecmaVersion": 6,
        "sourceType": "module",
        "ecmaFeatures": {
            "jsx": true
        }
    },
    // 规则定义
    "rules": {
        "semi": 2
    }
}

实例

了解了以上配置后，举例实际解决一个eslint报错的问题，也梳理下解决的过程。如下报错信息：

Missing space before function parentheses. (space-before-function-paren)

查看错误： 这个错误信息字面上看是函数前面少了个空格，我们右键赋值这个错误信息到eslint官网查查怎么配置。
查看官网：官网的介绍是在函数括号之前需要或不允许空格（space-before-function-paren）

{
    // always（默认值）需要一个空格后跟(参数。
    // never不允许任何空格后跟(参数。
    "space-before-function-paren": ["error", "always"]
}

.eslintrc.js配置： 了解配置规则我们可以将eslint规则改为函数前不需要空格

// .eslintrc.js 中
"space-before-function-paren": ["error", "never"]

Settings Sync

上传当前配置

下载配置