Vue-9.集成(.editorconfig、.eslintrc.js、.prettierrc)

news2024/9/22 15:41:21

介绍

同时使用 .editorconfig、.prettierrc 和 .eslintrc.js 是很常见的做法,因为它们可以在不同层面上帮助确保代码的格式一致性和质量。这种组合可以在开发过程中提供全面的代码维护和质量保证。然而,这也可能增加一些复杂性,需要谨慎配置和协调(其实就是它们之间有交集的配置,这部分配置必须一致,所以我下面的配置都是配套的)。

简单示例

当同时使用 .editorconfig.prettierrc.eslintrc.js 这些配置文件时,可以实现一致的代码格式、规范和质量。以下是一个详细的示例,展示如何在一个项目中配置这些文件:

  1. .editorconfig 文件示例:

.editorconfig 文件用于定义代码编辑器的基本格式规范,以确保开发人员在不同编辑器中具有一致的代码格式。

# 根据项目的编程语言和需求设置默认配置
root = true

# 通用配置
[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

# 针对不同类型文件的配置
[*.{js,jsx,ts,tsx,vue}]
indent_size = 2

[*.md]
trim_trailing_whitespace = false
  1. .prettierrc 文件示例:

.prettierrc 文件用于配置 Prettier 格式化工具的格式规范,确保代码在不同编辑器中保持一致的风格。

{
  "printWidth": 80,
  "tabWidth": 2,
  "singleQuote": true,
  "trailingComma": "es5"
}
  1. .eslintrc.js 文件示例:

.eslintrc.js 文件用于配置 ESLint 代码静态分析工具的规则和格式,确保代码的质量和一致性。

module.exports = {
  env: {
    browser: true,
    es6: true
  },
  extends: ['eslint:recommended', 'plugin:vue/essential'],
  plugins: ['vue'],
  rules: {
    'no-console': 'off',
    'no-unused-vars': 'warn',
    'vue/no-unused-components': 'warn'
  }
};

在这个示例中,.editorconfig.prettierrc.eslintrc.js 配置文件都被放置在项目根目录中。通过这些配置,我们实现了以下效果:

  • .editorconfig 定义了通用的代码格式规范,包括缩进、换行符、字符集等。
  • .prettierrc 配置了 Prettier 的代码格式规则,如行宽、缩进、引号类型等。
  • .eslintrc.js 定义了 ESLint 的代码质量规则,包括不允许使用 console、警告未使用的变量等。

通过同时使用这些配置文件,可以确保项目中的代码在编辑器中保持一致的格式,遵循一致的规范,并且符合预定的代码质量标准。这有助于提高协作效率、代码质量和可维护性。

企业级配置

.editorconfig

# 通用设置
[*]
# 使用 UTF-8 字符集
charset = utf-8
# 使用 LF(换行符)
end_of_line = lf
# 文件末尾不需要插入空行
insert_final_newline = false
# 使用空格作为缩进
indent_style = space
# 缩进大小为 2 个空格
indent_size = 2

# 针对特定文件类型的设置
[{*.ng,*.sht,*.html,*.shtm,*.shtml,*.htm}]
# 使用空格作为缩进
indent_style = space
# 缩进大小为 2 个空格
indent_size = 2

# 针对另一系列文件类型的设置
[{*.jhm,*.xslt,*.xul,*.rng,*.xsl,*.xsd,*.ant,*.tld,*.fxml,*.jrxml,*.xml,*.jnlp,*.wsdl}]
# 使用空格作为缩进
indent_style = space
# 缩进大小为 2 个空格
indent_size = 2

# 针对一些配置文件的设置
[{.babelrc,.stylelintrc,jest.config,.eslintrc,.prettierrc,*.json,*.jsb3,*.jsb2,*.bowerrc}]
# 使用空格作为缩进
indent_style = space
# 缩进大小为 2 个空格
indent_size = 2

# 针对 .svg 文件的设置
[*.svg]
# 使用空格作为缩进
indent_style = space
# 缩进大小为 2 个空格
indent_size = 2

# 针对 .js.map 文件的设置
[*.js.map]
# 使用空格作为缩进
indent_style = space
# 缩进大小为 2 个空格
indent_size = 2

# 针对 .less 文件的设置
[*.less]
# 使用空格作为缩进
indent_style = space
# 缩进大小为 2 个空格
indent_size = 2

# 针对 .vue 文件的设置
[*.vue]
# 使用空格作为缩进
indent_style = space
# 缩进大小为 2 个空格
indent_size = 2

# 针对另一些配置文件的设置
[{.analysis_options,*.yml,*.yaml}]
# 使用空格作为缩进
indent_style = space
# 缩进大小为 2 个空格
indent_size = 2

.eslintrc.js

你提供的是一个 .eslintrc.js 配置文件,用于配置 ESLint 规则,其中还包括了 Vue 3、Prettier 和 Jest 的集成。以下是你的配置文件的详细解释:

module.exports = {
  root: true, // 根配置文件
  env: {
    node: true, // 运行环境为 Node.js
  },
  extends: [
    "plugin:vue/vue3-essential", // 使用 Vue 3 的基本规则
    "eslint:recommended", // 使用 ESLint 推荐的规则
    "plugin:prettier/recommended", // 集成 Prettier 的推荐规则
  ],
  parserOptions: {
    parser: "@babel/eslint-parser", // 使用 Babel 解析器
  },
  rules: {
    "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off", // 在生产环境禁用 debugger
    "no-console": process.env.NODE_ENV === "production" ? "error" : "off",   // 在生产环境禁用 console
    "space-before-function-paren": 0, // 函数定义括号前不需要空格
    "vue/require-default-prop": "off", // 不要求默认的 prop
    "vue/require-prop-types": "off", // 不要求 prop 的类型
    "generator-star-spacing": "off", // 禁用 generator 函数 * 后的空格警告
    "no-mixed-operators": 0, // 允许混合使用运算符
    "vue/max-attributes-per-line": [
      // 每行最多属性数
      2,
      {
        singleline: 5, // 单行最多 5 个属性
        multiline: {
          max: 1, // 多行最多 1 个属性
          allowFirstLine: false,
        },
      },
    ],
    "vue/attribute-hyphenation": 0, // 不强制属性使用连字符
    "vue/html-self-closing": 0, // 不强制自闭合标签
    "vue/component-name-in-template-casing": 0, // 组件名大小写不敏感
    "vue/html-closing-bracket-spacing": 0, // 不强制标签闭合前的空格
    "vue/singleline-html-element-content-newline": 0, // 单行元素内容不需要新行
    "vue/no-unused-components": 0, // 允许定义未使用的组件
    "vue/multiline-html-element-content-newline": 0, // 多行元素内容不需要新行
    "vue/no-use-v-if-with-v-for": 0, // 允许同时使用 v-if 和 v-for
    "vue/html-closing-bracket-newline": 0, // 标签闭合括号不需要新行
    "vue/no-parsing-error": 0, // 允许存在解析错误
    "no-tabs": 0, // 允许使用制表符
    quotes: [
      // 引号配置
      2,
      "single",
      {
        avoidEscape: true, // 避免转义
        allowTemplateLiterals: true, // 允许模板字符串
      },
    ],
    semi: [
      // 分号配置
      2,
      "never",
      {
        beforeStatementContinuationChars: "never",
      },
    ],
    "no-delete-var": 2, // 禁止删除变量
    "prefer-const": [
      // 建议使用 const
      2,
      {
        ignoreReadBeforeAssign: false,
      },
    ],
    "template-curly-spacing": "off", // 关闭模板字符串中花括号间的空格
    indent: "off", // 关闭缩进检查
  },
  overrides: [
    {
      files: [
        "**/__tests__/*.{j,t}s?(x)",
        "**/tests/unit/**/*.spec.{j,t}s?(x)",
      ],
      env: {
        jest: true, // 在测试文件中启用 Jest 环境
      },
    },
  ],
};

解释如下:

  • root: true:表示该配置文件是项目的根配置文件,不会再向上查找其他配置文件。

  • env: { node: true }:指定代码的运行环境为 Node.js。

  • extends:继承其他的 ESLint 配置,这里使用了以下扩展配置:

    • "plugin:vue/vue3-essential":使用 Vue 3 的基本规则,该插件提供了与 Vue 3 一起使用的必要规则。
    • "eslint:recommended":使用 ESLint 推荐的规则,这些规则有助于提高代码质量和可读性。
    • "plugin:prettier/recommended":集成 Prettier 的推荐规则,确保 ESLint 和 Prettier 一起使用时不会冲突。
  • parserOptions:指定解析器选项,这里使用 @babel/eslint-parser 解析 JavaScript,与 Babel 一起使用。

  • rules:定义自定义的规则和规则覆盖。其中包括:

    • "no-console""no-debugger":根据环境决定是否允许使用 consoledebugger
  • overrides:覆盖配置,对特定文件或文件夹应用不同的配置。在此配置中,对测试文件启用了 Jest 环境。

.prettierrc

这是一个 Prettier 配置,Prettier 是一个用于格式化代码的工具,可以让你的代码在不同的编辑器中保持一致的样式。以下是你提供的 Prettier 配置的解释:

{
  "printWidth": 120, // 每行代码的最大字符数为 120
  "semi": false, // 不使用分号
  "singleQuote": true, // 使用单引号
  "prettier.spaceBeforeFunctionParen": true // 在函数参数的括号前添加空格
}

解释如下:

  • "printWidth": 120:限制每行代码的最大字符数为 120。当代码行超过这个字符数时,Prettier 会自动进行换行以保持代码的可读性。

  • "semi": false:不使用分号。Prettier 会自动删除你的代码中不必要的分号,以及为需要的地方添加分号。

  • "singleQuote": true:使用单引号。Prettier 会将字符串中的双引号替换为单引号,以保持一致的引号风格。

  • "prettier.spaceBeforeFunctionParen": true:在函数参数的括号前添加空格。这可以让函数定义更加清晰,比如 function foo( x ) 而不是 function foo(x)

你可以将这些配置应用到项目中的 .prettierrc.prettierrc.json 文件中,以确保你的代码在格式化时遵循这些规则。这将有助于团队成员在编辑代码时保持一致的风格。

在VsCode中如何使用

.editorconfig

在 Visual Studio Code 中使用 EditorConfig 可以帮助你维持一致的代码风格,并根据项目中的 .editorconfig 文件自动调整编辑器的设置。以下是如何在 VS Code 中使用 EditorConfig 的步骤:

  1. 安装 “EditorConfig for VS Code” 扩展:

    • 打开 VS Code。
    • 在侧边栏的扩展面板中搜索 “EditorConfig for VS Code”。
    • 点击安装按钮,安装扩展。
  2. 创建或定位到项目的 .editorconfig 文件:

    • 在项目根目录中创建一个名为 .editorconfig 的文件,如果该文件已经存在,则直接定位到它。
  3. 配置 .editorconfig 文件:

    • 编辑 .editorconfig 文件以定义你想要的代码风格规则。这个文件使用类似 INI 文件的语法。
    • 例如,你可以像下面这样配置一些常用的规则:
# 缩进风格
[*]
indent_style = space
indent_size = 2

# JavaScript 和 TypeScript 文件
[*.js]
indent_style = space
indent_size = 2

# Python 文件
[*.py]
indent_style = space
indent_size = 4

# 其他规则...
  1. 保存文件后,VS Code 将会根据 .editorconfig 文件自动调整编辑器设置,以保持一致的代码风格。

需要注意的是,“EditorConfig for VS Code” 扩展会自动读取项目中的 .editorconfig 文件,并根据配置调整编辑器设置。这使得团队中的开发人员可以共享相同的代码风格,无论他们使用哪种编辑器。

在使用 EditorConfig 时,也要注意是否与其他格式化工具(如 Prettier、ESLint 等)产生冲突。通常,EditorConfig 更多地用于基本的缩进、换行、编码等风格,而其他工具可以用于更高级的代码质量和规范性方面。

.eslintrc.js

在 Visual Studio Code 中使用 .eslintrc.js(或 .eslintrc.json)文件,可以帮助你在编辑代码时检测和修复代码质量问题,以及保持一致的代码风格。以下是在 VS Code 中使用 ESLint 的步骤:

  1. 确保已安装必要的软件:

    • 在项目根目录中确保已经安装了 ESLint 和相关插件,以及一个合适的配置文件(.eslintrc.js.eslintrc.json)。
  2. 安装 “ESLint” 扩展:

    • 打开 VS Code。
    • 在侧边栏的扩展面板中搜索 “ESLint”。
    • 点击安装按钮,安装扩展。
  3. 配置 ESLint 扩展:

    • 安装完 “ESLint” 扩展后,它会自动检测项目中的 .eslintrc.js.eslintrc.json 文件,并根据配置文件设置代码检查规则。
  4. 在编辑器中使用 ESLint:

    • 打开一个项目中的 JavaScript 或 TypeScript 文件。
    • 如果文件中存在不符合 ESLint 规则的代码,你会在编辑器的左下角看到一个小灯泡图标。
    • 将鼠标悬停在灯泡上,你将看到 ESLint 的错误或警告信息。
    • 点击灯泡图标,你可以选择应用修复或忽略错误。
  5. 自动修复代码问题:

    • 在编辑器中,你可以右键点击代码或选择一部分代码,然后点击右键菜单中的 “Fix all auto-fixable Problems”。
    • 这将自动修复当前文件中所有可以自动修复的问题,基于你的 ESLint 配置。

需要注意的是,VS Code 会自动检测项目中的 ESLint 配置文件,并根据配置在编辑器中显示错误和警告信息。使用 ESLint 扩展可以帮助你及时发现和修复代码质量问题,从而提高代码的可维护性和一致性。

如果你遇到了配置问题或其他问题,确保你的项目中已经正确安装了 ESLint 和相应的配置文件,并根据需要调整 VS Code 的设置。

.prettierrc

在 Visual Studio Code 中使用 .prettierrc(或 .prettierrc.json.prettierrc.yaml 等)文件,可以帮助你维持一致的代码格式,并自动应用 Prettier 的代码格式化规则。以下是在 VS Code 中使用 Prettier 的步骤:

  1. 确保已安装必要的软件:

    • 在项目根目录中确保已经安装了 Prettier 和相关插件,以及一个合适的配置文件(.prettierrc 或其他格式的配置文件)。
  2. 安装 “Prettier - Code formatter” 扩展:

    • 打开 VS Code。
    • 在侧边栏的扩展面板中搜索 “Prettier - Code formatter”。
    • 点击安装按钮,安装扩展。
  3. 配置 “Prettier - Code formatter” 扩展:

    • 在 VS Code 的设置中搜索 “Prettier”。

    在这里插入图片描述

    • 找到 “Prettier: Require Config” 设置,并将其设置为 “true”,以确保 VS Code 使用项目根目录中的 .prettierrc 文件。

    在这里插入图片描述

    • 如果你的 .prettierrc 文件位于项目根目录之外,你还可以在该设置中提供自定义的配置文件路径。
  4. 在编辑器中使用 Prettier:

    • 打开一个支持的代码文件(例如 JavaScript、TypeScript、CSS、JSON 等)。
    • 你可以使用快捷键(默认为 Shift + Alt + F)或右键点击编辑器中的代码,然后选择 “Format Document” 来应用 Prettier 的格式化规则。
      在这里插入图片描述
      在这里插入图片描述
      在这里插入图片描述
  5. 自动保存时格式化:

    • 在 VS Code 设置中搜索 “Format On Save”。
    • 启用 “Editor: Format On Save” 设置,以便在保存文件时自动应用 Prettier 的格式化规则。

在这里插入图片描述

通过上述步骤,你可以在 Visual Studio Code 中轻松使用 Prettier 来保持一致的代码格式。当你保存文件时,Prettier 将自动格式化代码,确保代码风格的一致性。

确保你的项目中已经正确安装了 Prettier,并根据需要调整 VS Code 的设置以便与 Prettier 一起使用。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/901744.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

恢复NuGet包_解决:System.BadImageFormatException:无法加载文件或程序集

C#工程 主要是开发了一个 web api接口,这个工程源码去年还可以的,今年换了一个电脑打开工程就报错。 错误提示如下: 在 Microsoft.CodeAnalysis.CSharp.CommandLine.Program.Main(String[] args) Test1 System.BadImageFormatEx…

人脸识别技术在社会安全与便利中的应用

引言:随着人工智能的快速发展,人脸识别技术已经成为一种实时、高效的身份验证和安全监控手段。它的广泛应用可以帮助识别犯罪嫌疑人、寻找失踪人口等,为社会安全和公共利益做出了重要贡献。本文将详细探讨人脸识别技术的原理、应用&#xff0…

【Rust日报】2023-08-18 RustShip:一个新的 Rust 播客

探索 Rust 编译器基准测试套件 在最近关于 Rust 编译器 CI(持续集成)和基准测试基础设施的文章中,作者承诺写一篇关于运行时基准测试的博客文章,这是 Rust 编译器基准测试套件的新补充。然而,在这样做之前,…

春秋云镜 CVE-2020-13933

春秋云镜 CVE-2020-13933 Shiro < 1.6.0 验证绕过漏洞 靶标介绍 Apahce Shiro 由于处理身份验证请求时出错 存在 权限绕过漏洞&#xff0c;远程攻击者可以发送特制的HTTP请求&#xff0c;绕过身份验证过程并获得对应用程序的未授权访问。 启动场景 漏洞利用 exp /admin…

读发布!设计与部署稳定的分布式系统(第2版)笔记33_混沌工程

1. 康威定律 1.1. 梅尔文康威 1.1.1. Melvin Conway 1.1.2. 1968年 1.1.3. 在设计系统时&#xff0c;组织受制于其自身的沟通结构&#xff0c;这使得它设计的系统结构与沟通结构相一致。 1.1.3.1. 社会学现象 1.2. 要在系统内部或系统之间构建接口&#xff0c;两个人必须…

基于 Vercel TiDB Serverless 的 chatbot

作者&#xff1a; shiyuhang0 原文来源&#xff1a; https://tidb.net/blog/7b5fcdc9 # 前言 TiDB Serverless 去年就有和 Vercel 的集成了&#xff0c;同时还有一个 bookstore template 方便大家体验。但个人感觉 bookstore 不够炫酷&#xff0c;借 2023 TiDB hackthon 的…

使用Python从Ditto数据库中读取历史图片

在本文中&#xff0c;我们将探讨如何使用Python编程语言从Ditto剪贴板管理工具的数据库中读取历史中您复制粘贴过的图片。我们将讲解编程的过程&#xff0c;并提供示例代码来帮助您理解如何实现这个功能。 C:\pythoncode\blog\showdbimage.py Ditto数据库 Ditto使用SQLite数…

车载APP软件外包开发流程

车载APP的开发流程涉及多个阶段&#xff0c;从概念到发布都需要仔细的规划和执行。以下是一个一般性的车载APP开发流程概述&#xff0c;希望对大家有所帮助。北京木奇移动技术有限公司&#xff0c;专业的软件外包开发公司&#xff0c;欢迎交流合作。 1.需求分析和规划&#xff…

VMWare Workstation 17 Pro 网络设置 桥接模式 网络地址转换(NAT)模式 仅主机模式

文章目录 网络模式配网要求CentOSDHCP虚拟网络桥接模式默认配置测试手动配置测试 网络地址转发模式 (NAT)还原配置虚拟网络配置默认配置测试手动配置测试 仅主机模式 网络模式 桥接模式: 主机与虚拟机对等, 虚拟机注册到主机所在的局域网, 会占用该网络的IP该局域网内的所有机…

【COMP282 LEC3 LEC4 LEC5】

LEC 3 Overloading 超载 1. Two functions can have the same name if they have different parameters 2. The compiler will use the one whose parameters match the ones you pass in Performing Addition “” 重载一个operator &#xff0c;这个operator函数被定义…

[线程/C]基础

文章目录 1. 线程介绍2. 创建线程2.1 线程函数2.2 创建线程 3. 线程退出4. 线程回收4.1 线程函数4.2 回收子线程数据4.2.1 使用子线程栈4.2.2 使用全局变量4.2.3 使用主线程栈 5. 线程分离6. 其他线程函数6.1 线程取消6.2 线程ID的比较 1. 线程介绍 线程是轻量级的进程&#x…

C语言入门教程,C语言学习教程(非常详细)第二章 c语言初探

第一个C语言程序 我们有两种方式从计算机获得信息&#xff1a;一是看屏幕上的文字、图片、视频等&#xff0c;二是听从喇叭发出来的声音。让喇叭发出声音目前还比较麻烦&#xff0c;我们先来看看如何在屏幕上显示一些文字吧。 在屏幕上显示文字非常简单&#xff0c;只需要一个…

npm 不是内部或外部命令,也不是可运行的程序或批处理文件。

遇到问题&#xff1a; 1.遇到问题&#xff1a;npm 不是内部或外部命令&#xff0c;也不是可运行的程序或批处理文件。 2.遇到问题&#xff1a;或者使用npm安装插件时会出现 XXX\node\node_modules\npm不可用 情况 如下图&#xff1a; 分析问题&#xff1a; nodejs在nodejs官网…

Python内置库介绍——random库

Content 0. 前言1. random.random()2. random.randint(a, b)3. random.choice(seq)4. random.shuffle(seq)5. random.sample(population, k)6. random.uniform(a, b)7. random.seed(x)8. 使用实例&#xff1a;随机生成用户初始账号和初始密码 0. 前言 操作系统&#xff1a;Win…

Leecode找出字符串中第一个匹配项的下标 即实现strSTR()函数

目录 简单介绍该函数的作用 在我们去用关键词查找微信或者qq聊天记录的时候&#xff0c;我们总不能一句一句去找吧。我们需要用到的功能底层大概是此博客所讲的这个函数熬。 一.算法需要传入的参数和返回类型 需要传入的就是关键词和所有的文本&#xff0c;返回的是当前关键词…

IDEA源码下载失败问题

1.IDEA下载源码报 java.lang.RuntimeException: Cannot reconnect java.lang.RuntimeException: Cannot reconnect 异常通常表示无法重新连接到资源或服务。这种情况可能出现在尝试重新连接到数据库、网络套接字或任何需要连接的资源时。 以下是解决此异常的几种可能方法&…

经典LeetCode在线OJ习题

目录 习题一&#xff1a;移除元素 &#xff08;一&#xff09;、题目 &#xff08;二&#xff09;、示例 &#xff08;三&#xff09;、解题思路 思路一&#xff1a; 思路一源代码&#xff1a; 源代码解释&#xff1a; 思路二&#xff1a;&#xff08;最标准最适用&#…

利用metasploit生成反弹shell程序,实现远程控制

1. 关于metasploit Metasploit是一款开源的渗透测试框架&#xff0c;由Rapid7公司开发和维护。它提供了一套强大的工具和资源&#xff0c;用于评估和测试计算机系统的安全性。Metasploit的目标是帮助安全专业人员发现和利用系统中的漏洞&#xff0c;以便改进系统的安全性。 Met…

Mybatis的SqlSource SqlNode BoundSql

学习链接 MyBatis SqlSource解析 【Mybatis】Mybatis源码之SqlSource#getBoundSql获取预编译SQL Mybatis中SqlSource解析流程详解 Mybatis TypeHandler解析 图解 Mybatis的SqlSource&SqlNode - processon DynamicSqlSource public class DynamicSqlSource implement…

【leetcode 力扣刷题】哈希表初尝试

哈希表 刷题初尝试 哈希表基础知识242. 有效的字母异位词383. 赎金信49. 字母异位词分组438. 找到字符串中所有字母异位词 哈希表基础知识 哈希表是一种数据结构&#xff0c;也叫散列表。哈希表中存储的是键值对&#xff0c;即(key&#xff0c;value)&#xff0c;根据key直接查…