ESlint Prettier Git 中使用 ignore忽略文件的规则解释

16 篇文章 0 订阅
3 篇文章 0 订阅

概述

我们经常在项目中使用.gitignore去忽略文件,比如

# .gitignore忽略项目依赖和打包文件
node_modules
dist

其实,除了Git,ESLint和Prettier同样提供了对应的ignore文件

  • .eslintignore 为ESLint忽略指定文件
  • .prettierignore 为Prettier忽略指定文件

同Git,显然我们不希望对如node_modules依赖文件夹中的文件进行格式化或者做代码质量检查,所以忽略指定文件是必要的。

幸运的是,ESLint和Prettier的忽略规则与Git是一致的。

对于ESLint,其官网提到:

Please see .gitignore’s specification for further examples of valid syntax.

对于Prettier,其官网提到

.prettierignore uses gitignore syntax.

接下来我们来详细看一下,.gitignore都有哪些规则

规则明细

  • 对于空白符,比如空格,git是忽略了的。所以可以借助空格回车来使得文件更易读。
  • #表示注释
  • 对于/斜杠,他有两个语义。当被放到一条规则的起始或者中间,则这条规则被表示为一个相对于.gitignore文件的目录或文件,反之,若起始或中间没有斜杠,则表示匹配到任意目录或文件。比如一条规则是App.vue,那么即使App.vue被放到了src目录内,同样也是能匹配到的。另外一个语义则是/被放到一条规则的尾部,此时其用来区分一个目录,而非一个文件。他与第一个语义不冲突,比如frotz/代表任意目录下包含frotz/的目录。
  • !取反符号表示忽略指定目录或文件,言下之意就是让git再次跟踪其包含的文件。其规则与上一条也不冲突。但有一个注意事项,即指定忽略的文件或目录的父目录不能被整体忽略。比如我先包含src,之后忽略!src/App.vue这是不生效的。可以写成src/*,后忽略!src/App.vue
  • **有三种语义,**/foo表示任意目录下的foo;abc/**表示abc之后任意目录下的文件;a/**/b表示a目录下任意级目录的子目录b。

举例

# 排除了 foo/bar 的所有文件。
/*
!/foo
/foo/*
!/foo/bar

参考

Prettier官网: https://prettier.io/docs/en/ignore.html
ESLint官网:https://eslint.org/docs/user-guide/configuring/ignoring-code
Git官网:https://git-scm.com/docs/gitignore#_pattern_format

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: ESLintPrettier可以联合使用来提高代码质量和可读性。ESLint用于检查代码是否符合规范,而Prettier则用于格式化代码,使其更易于阅读和维护。两者的结合可以帮助开发人员在编写代码时更加高效和准确。同时,ESLintPrettier都可以通过配置文件进行个性化设置,以满足不同项目的需求。 ### 回答2: Eslintprettier都是在开发过程用于代码检查和格式化的工具,二者结合使用可以大大提高代码质量和开发效率。 Eslint是一种静态代码分析工具,可以检查和捕获代码的错误和潜在问题,并提供规则和规范来强制执行最佳实践。它可以检查各种语言的代码,并能够根据eslint配置文件规则进行标记和警告。Eslint还可以集成到IDE和编辑器,方便开发者及时发现和修复问题。 Prettier是一种自动化代码格式化工具,可以帮助开发者自动格式化代码,并保持一致的代码风格。与许多其他代码格式化工具不同的是,Prettier没有配置选项或细节设置。相反,Prettier将代码格式化为一种标准化的样式,以保证代码的可读性和一致性。 将EslintPrettier结合使用,可以在代码开发期间将代码格式问题和代码质量问题快速检测出来,并在编辑器展示,同时也可以自动执行代码格式化和标准化,提高代码质量和开发效率。通常,面对不同类型的代码问题,EslintPrettier都具有独特的处理方法,其Eslint可以更好的解决一些代码规范和质量问题,Prettier则可以更好的解决代码结构和格式化问题。 要让EslintPrettier联合使用,通常需要将Prettier作为Eslint的插件进行配置。这可以通过将Prettier规则添加到Eslint来实现,以及设置一些特定的配置选项和规则。同时,可以在EslintPrettier的配置文件相互引用,以保证二者的一致性和关联性。 总的来说,EslintPrettier联合使用,可以帮助开发者检测和解决一些常见的代码问题和格式化问题,提高代码质量和开发效率,是一个非常值得推荐的开发实践。 ### 回答3: 对于前端开发人员来说,代码格式规范一直是一个重要的问题。为了让代码更整洁、易于阅读和可维护性强,通常需要手动编写代码,以符合团队的规范和标准。但随着前端框架和工具的发展,我们可以使用一些自动化工具来帮助我们实现代码格式化和规范化。其eslintprettier是目前非常流行的两个工具。在本篇文章,我们将介绍eslintprettier联合使用的优势和实现方法。 一、eslint是什么 eslint是一个JavaScript代码检查工具,它可以识别出代码的潜在问题,如语法错误、代码风格违规等,并提供一些自动修复功能,帮助程序员编写更加规范的代码。eslint可以通过插件灵活扩展,并支持与常用的编辑器集成,如Visual Studio Code、Sublime Text等。以上特点让eslint在微软TypeScript、React等社区具有很高的使用率和推广。 二、prettier是什么 prettier是专门用来格式化代码的工具,它可以自动规范代码的缩进、空格、换行等,让代码完全符合团队的规范。prettier支持多种语言,包括JavaScript、TypeScript、CSS、SCSS、Less等。prettier的优势是能够解决各种代码格式化问题,支持ES6、JSX、TS等最新的语法,可以应用于各种框架和库。 三、使用eslintprettier联合使用的好处 使用eslintprettier联合使用的好处主要有以下几点: 1. 代码规范性更高:通过eslint可以指定定义的代码规范,prettier可以使代码更加统一和规范,从而提升团队开发效率和代码重用性。 2. 提高开发效率:自动化规范程序员可以跳过繁琐的规范化代码环节,有更多的精力去开发业务代码。 3. 避免争论:代码格式规范一直是团队里开发者之间常见的争论点之一,通过工具执行,可以避免代码风格规范的差异,减少因代码风格问题引起的争论。 4. 降低代码维护成本:规范化的代码可降低翻新、修复和维护代码的难度,减少因为代码风格问题出现的一些 bug。 四、eslint+prettier联合使用的实现方法 1.安装eslintprettier 在项目安装eslintprettier依赖: ``` npm install eslint prettier --save-dev ``` 2.安装eslint的插件 eslint可以借助插件进行功能扩展,在项目安装eslint相关的插件: ``` npm install eslint-config-prettier eslint-plugin-prettier --save-dev ``` 3.创建eslint配置文件 在项目根目录下创建.eslintrc.js文件,加入如下代码: ``` module.exports = { extends: ['plugin:prettier/recommended'], plugins: [ 'prettier' ], rules: { 'prettier/prettier': 'error' } } ``` 4.创建prettier配置文件 在项目根目录下创建.prettierrc.js文件,加入如下代码: ``` module.exports = { singleQuote: true, semi: false } ``` 以上代码是一个简单的使用示例,我们定义为了单引号和省略分号的规范,这样可以避免常见的一些问题。 5.在编辑器集成 在编辑器安装eslintprettier插件,然后更新保存操作的配置即可,如下图: ![prettier-vscode.png](https://cdn.nlark.com/yuque/0/2022/png/348394/1642563196216-f11d6356-fcd6-4728-a0d4-6949f31c70a8.png#align=left&display=inline&height=1024&margin=%5Bobject%20Object%5D&name=prettier-vscode.png&originHeight=1024&originWidth=1280&size=586352&status=done&style=none&width=1280) 例如在VS Code的配置:编辑器 => 首选项 => 设置,使用 F1 打开命令面板,输入 settings 命令即可进入设置页面。在搜索框输入 settings.json 并打开该配置文件,在文件加入以下代码即可实现自动触发代码格式化: ``` "editor.formatOnSave": true ``` 至此,eslint+prettier联合使用的基础配置已经完成。 综上所述,eslintprettier是目前非常流行的前端组件,使用它们开发程序代码将会让代码更加规范、易于维护,同时也是提高开发效率的有效方法。通过以上实现方式,可以在项目轻松实现eslint+prettier联合使用的效果,提升代码的可读性和整洁度。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值