vscode eslint及格式化

最新推荐文章于 2024-08-15 11:01:12 发布

转载最新推荐文章于 2024-08-15 11:01:12 发布 · 229 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5c3b4114518825792d4c61f1

文章标签：

#开发工具 #javascript #ViewUI

本文详述了如何在VSCode中配置ESLint和Vetur以统一代码风格，包括预设格式化工具如Prettier的配置，及解决实际报错问题的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

使用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

上传当前配置

下载配置