Giter VIP home page Giter VIP logo

eslint.org's Introduction

npm version Downloads Build Status FOSSA Status
Open Collective Backers Open Collective Sponsors Follow us on Twitter

ESLint

Website | Configure ESLint | Rules | Contribute to ESLint | Report Bugs | Code of Conduct | Twitter | Discord | Mastodon

ESLint is a tool for identifying and reporting on patterns found in ECMAScript/JavaScript code. In many ways, it is similar to JSLint and JSHint with a few exceptions:

  • ESLint uses Espree for JavaScript parsing.
  • ESLint uses an AST to evaluate patterns in code.
  • ESLint is completely pluggable, every single rule is a plugin and you can add more at runtime.

Table of Contents

  1. Installation and Usage
  2. Configuration
  3. Code of Conduct
  4. Filing Issues
  5. Frequently Asked Questions
  6. Releases
  7. Security Policy
  8. Semantic Versioning Policy
  9. Stylistic Rule Updates
  10. License
  11. Team
  12. Sponsors
  13. Technology Sponsors

Installation and Usage

Prerequisites: Node.js (^18.18.0, ^20.9.0, or >=21.1.0) built with SSL support. (If you are using an official Node.js distribution, SSL is always built in.)

You can install and configure ESLint using this command:

npm init @eslint/config@latest

After that, you can run ESLint on any file or directory like this:

./node_modules/.bin/eslint yourfile.js

Configuration

After running npm init @eslint/config, you'll have an eslint.config.js (or eslint.config.mjs) file in your directory. In it, you'll see some rules configured like this:

import pluginJs from "@eslint/js";
export default [ pluginJs.configs.recommended, ];

The names "semi" and "quotes" are the names of rules in ESLint. The first value is the error level of the rule and can be one of these values:

  • "off" or 0 - turn the rule off
  • "warn" or 1 - turn the rule on as a warning (doesn't affect exit code)
  • "error" or 2 - turn the rule on as an error (exit code will be 1)

The three error levels allow you fine-grained control over how ESLint applies rules (for more configuration options and details, see the configuration docs).

Code of Conduct

ESLint adheres to the JS Foundation Code of Conduct.

Filing Issues

Before filing an issue, please be sure to read the guidelines for what you're reporting:

Frequently Asked Questions

I'm using JSCS, should I migrate to ESLint?

Yes. JSCS has reached end of life and is no longer supported.

We have prepared a migration guide to help you convert your JSCS settings to an ESLint configuration.

We are now at or near 100% compatibility with JSCS. If you try ESLint and believe we are not yet compatible with a JSCS rule/configuration, please create an issue (mentioning that it is a JSCS compatibility issue) and we will evaluate it as per our normal process.

Does Prettier replace ESLint?

No, ESLint and Prettier have different jobs: ESLint is a linter (looking for problematic patterns) and Prettier is a code formatter. Using both tools is common, refer to Prettier's documentation to learn how to configure them to work well with each other.

Why can't ESLint find my plugins?

  • Make sure your plugins (and ESLint) are both in your project's package.json as devDependencies (or dependencies, if your project uses ESLint at runtime).
  • Make sure you have run npm install and all your dependencies are installed.
  • Make sure your plugins' peerDependencies have been installed as well. You can use npm view eslint-plugin-myplugin peerDependencies to see what peer dependencies eslint-plugin-myplugin has.

Does ESLint support JSX?

Yes, ESLint natively supports parsing JSX syntax (this must be enabled in configuration). Please note that supporting JSX syntax is not the same as supporting React. React applies specific semantics to JSX syntax that ESLint doesn't recognize. We recommend using eslint-plugin-react if you are using React and want React semantics.

What ECMAScript versions does ESLint support?

ESLint has full support for ECMAScript 3, 5, and every year from 2015 up until the most recent stage 4 specification (the default). You can set your desired ECMAScript syntax and other settings (like global variables) through configuration.

What about experimental features?

ESLint's parser only officially supports the latest final ECMAScript standard. We will make changes to core rules in order to avoid crashes on stage 3 ECMAScript syntax proposals (as long as they are implemented using the correct experimental ESTree syntax). We may make changes to core rules to better work with language extensions (such as JSX, Flow, and TypeScript) on a case-by-case basis.

In other cases (including if rules need to warn on more or fewer cases due to new syntax, rather than just not crashing), we recommend you use other parsers and/or rule plugins. If you are using Babel, you can use @babel/eslint-parser and @babel/eslint-plugin to use any option available in Babel.

Once a language feature has been adopted into the ECMAScript standard (stage 4 according to the TC39 process), we will accept issues and pull requests related to the new feature, subject to our contributing guidelines. Until then, please use the appropriate parser and plugin(s) for your experimental feature.

Which Node.js versions does ESLint support?

ESLint updates the supported Node.js versions with each major release of ESLint. At that time, ESLint's supported Node.js versions are updated to be:

  1. The most recent maintenance release of Node.js
  2. The lowest minor version of the Node.js LTS release that includes the features the ESLint team wants to use.
  3. The Node.js Current release

ESLint is also expected to work with Node.js versions released after the Node.js Current release.

Refer to the Quick Start Guide for the officially supported Node.js versions for a given ESLint release.

Where to ask for help?

Open a discussion or stop by our Discord server.

Why doesn't ESLint lock dependency versions?

Lock files like package-lock.json are helpful for deployed applications. They ensure that dependencies are consistent between environments and across deployments.

Packages like eslint that get published to the npm registry do not include lock files. npm install eslint as a user will respect version constraints in ESLint's package.json. ESLint and its dependencies will be included in the user's lock file if one exists, but ESLint's own lock file would not be used.

We intentionally don't lock dependency versions so that we have the latest compatible dependency versions in development and CI that our users get when installing ESLint in a project.

The Twilio blog has a deeper dive to learn more.

Releases

We have scheduled releases every two weeks on Friday or Saturday. You can follow a release issue for updates about the scheduling of any particular release.

Security Policy

ESLint takes security seriously. We work hard to ensure that ESLint is safe for everyone and that security issues are addressed quickly and responsibly. Read the full security policy.

Semantic Versioning Policy

ESLint follows semantic versioning. However, due to the nature of ESLint as a code quality tool, it's not always clear when a minor or major version bump occurs. To help clarify this for everyone, we've defined the following semantic versioning policy for ESLint:

  • Patch release (intended to not break your lint build)
    • A bug fix in a rule that results in ESLint reporting fewer linting errors.
    • A bug fix to the CLI or core (including formatters).
    • Improvements to documentation.
    • Non-user-facing changes such as refactoring code, adding, deleting, or modifying tests, and increasing test coverage.
    • Re-releasing after a failed release (i.e., publishing a release that doesn't work for anyone).
  • Minor release (might break your lint build)
    • A bug fix in a rule that results in ESLint reporting more linting errors.
    • A new rule is created.
    • A new option to an existing rule that does not result in ESLint reporting more linting errors by default.
    • A new addition to an existing rule to support a newly-added language feature (within the last 12 months) that will result in ESLint reporting more linting errors by default.
    • An existing rule is deprecated.
    • A new CLI capability is created.
    • New capabilities to the public API are added (new classes, new methods, new arguments to existing methods, etc.).
    • A new formatter is created.
    • eslint:recommended is updated and will result in strictly fewer linting errors (e.g., rule removals).
  • Major release (likely to break your lint build)
    • eslint:recommended is updated and may result in new linting errors (e.g., rule additions, most rule option updates).
    • A new option to an existing rule that results in ESLint reporting more linting errors by default.
    • An existing formatter is removed.
    • Part of the public API is removed or changed in an incompatible way. The public API includes:
      • Rule schemas
      • Configuration schema
      • Command-line options
      • Node.js API
      • Rule, formatter, parser, plugin APIs

According to our policy, any minor update may report more linting errors than the previous release (ex: from a bug fix). As such, we recommend using the tilde (~) in package.json e.g. "eslint": "~3.1.0" to guarantee the results of your builds.

Stylistic Rule Updates

Stylistic rules are frozen according to our policy on how we evaluate new rules and rule changes. This means:

  • Bug fixes: We will still fix bugs in stylistic rules.
  • New ECMAScript features: We will also make sure stylistic rules are compatible with new ECMAScript features.
  • New options: We will not add any new options to stylistic rules unless an option is the only way to fix a bug or support a newly-added ECMAScript feature.

License

FOSSA Status

Team

These folks keep the project moving and are resources for help.

Technical Steering Committee (TSC)

The people who manage releases, review feature requests, and meet regularly to ensure ESLint is properly maintained.

Nicholas C. Zakas's Avatar
Nicholas C. Zakas
Francesco Trotta's Avatar
Francesco Trotta
Milos Djermanovic's Avatar
Milos Djermanovic

Reviewers

The people who review and implement new features.

唯然's Avatar
唯然
Nitin Kumar's Avatar
Nitin Kumar

Committers

The people who review and fix bugs and help triage issues.

Josh Goldberg ✨'s Avatar
Josh Goldberg ✨
Tanuj Kanti's Avatar
Tanuj Kanti

Website Team

Team members who focus specifically on eslint.org

Amaresh  S M's Avatar
Amaresh S M
Strek's Avatar
Strek
Percy Ma's Avatar
Percy Ma

Sponsors

The following companies, organizations, and individuals support ESLint's ongoing maintenance and development. Become a Sponsor to get your logo on our README and website.

Platinum Sponsors

Automattic Airbnb

Gold Sponsors

Eli Schleifer Salesforce

Silver Sponsors

JetBrains Liftoff American Express Workleap

Bronze Sponsors

notion Anagram Solver Icons8 Discord Ignition Nx HeroCoders Nextbase Starter Kit

Technology Sponsors

eslint.org's People

Contributors

aladdin-add avatar alixfachin avatar amareshsm avatar bpmutter avatar btmills avatar captbaritone avatar chenxsan avatar darahak avatar deepshikas avatar denisx avatar fasttime avatar harish-sethuraman avatar ismail-kharrobi avatar kecrily avatar luifermoron avatar mdjermanovic avatar michaeldeboey avatar nschonni avatar nzakas avatar ota-meshi avatar rodzman avatar sanjeetsuhag avatar sarasoueidan avatar sayzlim avatar sergeastapov avatar shanpriyan avatar smadixd avatar snitin315 avatar stefankolb avatar tanujkanti4441 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

eslint.org's Issues

Add footer link URLs

So we've got a bunch of links in the site footer!

@nzakas Could you kindly add the URLs for those links when you've got some time? Or post them here and I'll add them.

Thank you!

Translate to French

What language do you want to translate the website into?

French

What is the language code for the language?

FR

What is the locale code for the language?

fr

What help will you need?

Can't think of anything right now, but maybe something will come up later.

Implementation Checklist

  • Create new site file
  • Set up Netlify project
  • Register new domain name
  • Set up Google Analytics
  • Set up Carbon Ads

Participation

  • I am willing to submit a pull request for this change.

Additional comments

No response

Translate to German

What language do you want to translate the website into?

German

What is the language code for the language?

de

What is the locale code for the language?

de_DE

What help will you need?

I'm currently stuck on the npm install step as the installation of sharp crashes due to not being able to find glib. I have libglib2.0-dev and libglib2.0-dev-bin installed and installing libvips-dev fixed the previous (similar) error the package had. I'm running Kubuntu 21.10 and nodejs 14.x (also tried node16.x, same error)

Implementation Checklist

  • Create new site file
  • Set up Netlify project
  • Register new domain name
  • Set up Google Analytics
  • Set up Carbon Ads

Participation

  • I am willing to submit a pull request for this change.

Additional comments

No response

Translate to French

What language do you want to translate the website into?

French

What is the language code for the language?

FR

What is the locale code for the language?

fr

What help will you need?

Nothing for now.

Implementation Checklist

  • Create new site file
  • Set up Netlify project
  • Register new domain name
  • Set up Google Analytics
  • Set up Carbon Ads

Participation

  • I am willing to submit a pull request for this change.

Additional comments

Should I update technical parts (google analytics, ads, etc) ?
Is there any deadline for this ?

Live reload for playground editor

During development, the website will live reload if Eleventy-owned files are changed, but not if the React components are changed.

It would be great to also live reload when React components are changed to make development easier.

Bug: Long text blocks in blog posts cause text to spill out on the right

URL(s)

https://deploy-preview-240--new-eslint.netlify.app/content/drafts/interesting-bugs-caught-by-no-constant-binary-expression/

What did you do?

Went to the page in Firefox on Windows

What did you expect to happen?

Normal layout of the page

What actually happened?

Text is overflowing to the right.

Screenshot 2022-07-04 at 12-07-43 Interesting bugs caught by no-constant-binary-expression - ESLint - Pluggable JavaScript Linter

This appears to be related to the code block in "Confusing ?? and || precedence", as it is the only one that goes past the right margin:

Screenshot 2022-07-04 at 12-09-38 Interesting bugs caught by no-constant-binary-expression - ESLint - Pluggable JavaScript Linter

Participation

  • I am willing to submit a pull request for this issue.

Additional comments

It looks like this is working correctly on the docs site, so it must be some configuration or CSS issue that hasn't been copied over correctly.

Category image names

@nzakas It looks like the Financials and Announcements categories don't have a cover image—it is currently broken. I'm not sure which of the images will be used for each. Could you kindly just rename the image files for those categories to match the category names? <3

Thank you! (And happy new year!)

Add author bios and social links to all_authors global data file

@nzakas Hey Nicholas!

OK so every blog post has a list of contributors to the left, and then the list of authors again at the bottom. But the authors on the bottom of the post have biographies displayed. And since we're pulling those from the all_authors data file (I had to rename this in one of the branches because the name was conflicting with the data in the post yaml), we'll need to get the author bios and social links pulled into the authors file, similar to what you did in the team data file.

Could you kindly do that? We basically need the same object attributes for every person in the all_authors file as we do in the team file.

Translate to Hindi

What language do you want to translate the website into?

Hindi

What is the language code for the language?

hi

What is the locale code for the language?

hi_IN

What help will you need?

Nothing at the moment.

Implementation Checklist

  • Create new site file
  • Set up Netlify project
  • Register new domain name
  • Set up Google Analytics
  • Set up Carbon Ads

Participation

  • I am willing to submit a pull request for this change.

Additional comments

I will take a few weeks for this.

Bug: OpenGraph URLs should contain full URL

URL(s)

https://eslint.org/

What did you do?

view source

What did you expect to happen?

<meta property="og:url" content="/">
should be:
<meta property="og:url" content="https://eslint.org/">

What actually happened?

see above

Participation

  • I am willing to submit a pull request for this issue.

Additional comments

No response

Alternative text for the Donate page graph & homepage code image

Hey @nzakas!

We have two images that need alternative text that describes their content. I would create that alt text, but I don't know what it should say.

The first image is the code screenshot on the homepage. And the second image is the graph on the Donate page.

Could you kindly let me know what their alt text should say so that I can add it? I didn't ask you to add it yourself because, depending on the text, I may end up changing the implementation technique (e.g. using <object> instead of img for the graph).

Thank you! ^^

Bug: theme switcher was not displayed well with cn

URL(s)

it was not deployed yet. I was using my dev: http://localhost:2022/

What did you do?

just scroll to the bottom.

What did you expect to happen?

"深色"/ "浅色" should be display in one line.

What actually happened?

image

Participation

  • I am willing to submit a pull request for this issue.

Additional comments

I've added a white-space: nowrap; in my local, it seems fixed the issue. I can make a PR if it's the right way to go. /cc @SaraSoueidan

Playground Font

Is the font we're using considered suitable for coding? I personally find it very difficult to read code samples in this font, and round parentheses () next to each other are especially distracting as they look like a circle.

image

Documentation Hierarchy

After reviewing our current docs, I think this is the hierarchy we should go with (at least to start):

  • User Guide
    • Getting Started
    • Configuring
      • Configuration Files
      • Configuring Language Options
      • Configuring Rules
      • Configuring Plugins
      • Ignoring Code
    • Command Line Interface
    • Rules
    • Formatters
    • Integrations
    • Migrating to v8.x
  • Developer Guide
    • Getting the Source Code
    • Setup a Development Environment
    • Run the Tests
    • Working with Rules
    • Working with Plugins
    • Working with Custom Formatters
    • Working with Custom Parsers
    • Shareable Configs
    • Node.js API
    • Contributing
    • Architecture
  • Maintainer Guide
    • Managing Issues
    • Reviewing Pull Requests
    • Managing Releases
    • Governance

I'm wondering now if maybe "User Guide", "Developer Guide", and "Maintainer Guide" should be collapsible?

Bug: GitHub Logo disappears on dark theme

URL(s)

https://new.eslint.org/donate

What did you do?

Went to the page on dark mode

What did you expect to happen?

To see the GitHub logo next to the “GitHub Sponsors” text.

What actually happened?

The logo is missing because it’s dark-on-dark.

Participation

  • I am willing to submit a pull request for this issue.

Additional comments

No response

Suggestion: Make the thickness of the upper and lower borders consistent

What problem do you want to solve?

I want to solve my first impression for a first impression of the website viewer. It is that I felt the website has a progress bar area at top of the website.

I thought that this has occurred by two reasons.
First, the current website header doesn't consistent the upper and lower borders. The upper border has 4px but the lower border has 1px.
Additionaly, the color of this upper border is different from the lower border and a background color in the website.

Code pointer

https://github.com/eslint/new.eslint.org/blob/c3360e64aa31c400c7264c56653c2406f86f4973/src/assets/scss/_header.scss#L1-L6

What do you think is the correct solution?

I think that this solution has two options.

  • Consistent the upper and lower borders
  • Remove the upper border

Participation

  • I am willing to submit a pull request for this change.

Additional comments

No response

Bug: improve selection color for install command

URL(s)

https://new.eslint.org/

What did you do?

Select the install command. The selection color is white which is not at all visible in the light theme. Also in the dark theme text color doesn't change on selection making it hard to read the actual command after selection.

Screenshot 2022-04-16 at 7 06 54 AM

Screenshot 2022-04-16 at 7 07 17 AM

What did you expect to happen?

The selection color should be purple, just like at the rest of the places.

Screenshot 2022-04-16 at 7 10 17 AM

Screenshot 2022-04-16 at 7 10 43 AM

What actually happened?

The selection color was white.

Participation

  • I am willing to submit a pull request for this issue.

Additional comments

No response

Translate to Chinese

What language do you want to translate the website into?

chinese

What is the language code for the language?

zh

What is the locale code for the language?

zh-cn

What help will you need?

Not yet. we already had a repo(https://github.com/eslint/cn.eslint.org), just need to copy to here.
cc @QC-L

Implementation Checklist

  • Create new site file
  • Set up Netlify project
  • Register new domain name
  • Set up Google Analytics
  • Set up Carbon Ads

Participation

  • I am willing to submit a pull request for this change.

Additional comments

No response

Translate to Spanish 🪐

What language do you want to translate the website into?

Spanish

What is the language code for the language?

ES

What is the locale code for the language?

es

What help will you need?

Nothing by the moment. I will let you know if any roadblock arrive.

Implementation Checklist

  • Create new site file
  • Set up Netlify project
  • Register new domain name
  • Set up Google Analytics
  • Set up Carbon Ads

Participation

  • I am willing to submit a pull request for this change.

Additional comments

Spanish is too wide. I will try to make as much as neutral as I can. I am planning to review another library docs first (like React etc).

If any suggestion, just let me know.

Remove moment dependency in favor of dayjs

Why?

https://github.com/eslint/new.eslint.org/blob/15bf8c7b6cdb5092bde7eb6b1f5550c73263c51e/package.json#L35

The moment dependency is quite heavy, nearly 70kb Gzipped according to Bundlephobia.

The use we have for it is very simple, so we could easily replace it with helpers or other existing dependencies like Day.js which is nearly 3kb Gzipped.

Also from https://momentjs.com/docs/#/-project-status/:

Recently, Chrome Dev Tools started showing recommendations for replacing Moment for the size alone. We generally support this move.
We now generally consider Moment to be a legacy project in maintenance mode. It is not dead, but it is indeed done.

Also, see:

Suggestion: using esm

What problem do you want to solve?

we are migrating to esm in a few other repos, the new one can be esm from the begining?

What do you think is the correct solution?

cjs -> esm

Participation

  • I am willing to submit a pull request for this change.

Additional comments

No response

Translating in Japanese

What language do you want to translate the website into?

Japanese

What is the language code for the language?

ja

What is the locale code for the language?

JP

What help will you need?

I will need a bit of time but I'll do my best!

Implementation Checklist

  • Create new site file
  • Set up Netlify project
  • Register new domain name
  • Set up Google Analytics
  • Set up Carbon Ads

Participation

  • I am willing to submit a pull request for this change.

Additional comments

No response

Bug: wrong page title on blog category pages

URL(s)

Every blog category page such as:

And so on.

What did you do?

  • Navigate to a blog category page like Announcements.
  • Check the page title in the browser tab or in the devtools (<head> -> <title>).

What did you expect to happen?

I expect the category name to be present in the page title. Something like:

Announcements - ESLint - Pluggable JavaScript Linter

What actually happened?

The title has the value undefined - ESLint - Pluggable JavaScript Linter.

Participation

  • I am willing to submit a pull request for this issue.

Additional comments

No response

Translate to Brazilian Portuguese

What language do you want to translate the website into?

Portuguese-BR

What is the language code for the language?

pt-br

What is the locale code for the language?

pt_BR

What help will you need?

Help with the process after creating and commiting the file.

Implementation Checklist

  • Create new site file
  • Set up Netlify project
  • Register new domain name
  • Set up Google Analytics
  • Set up Carbon Ads

Participation

  • I am willing to submit a pull request for this change.

Additional comments

No response

Extract text from site into en.yml

In order to support translation, we need to extract all of the text from the HTML into the src/_data/sites/en.yml file.

  • Homepage
  • Team page
  • Blog page
  • Donate page
  • Sponsors page
  • 404 page
  • Branding page
  • Languages page
  • Header
  • Footer
  • Social Icons
  • Theme Switcher
  • Language Switcher

Bug: Blog feed is empty

URL(s)

https://eslint.org/feed.xml

What did you do?

Noticed rss2email did not pick up the latest release (and also the one before that).

lynx -dump https://eslint.org/blog/ doesn't show a link to the feed, but that might not be a problem.

What did you expect to happen?

Feed populated

What actually happened?

<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
  <title>ESLint Blog</title>
  <subtitle>feed description</subtitle>
  <link href="https://eslint.org.com/feed.xml" rel="self"/>
  <link href="https://eslint.org/"/>
  <updated>2022-07-17T07:02:33Z</updated>
  <id>https://eslint.org/</id>
  <author>
    <name>ESLint</name>
    <email></email>
  </author>
</feed>

Participation

  • I am willing to submit a pull request for this issue.

Additional comments

Appears to have started some time after v8.18.0 (Jun 17, 2022).

Perhaps due to the extra .com here?

"feedUrl": "https://eslint.org.com/feed.xml",

Translate to German

What language do you want to translate the website into?

German

What is the language code for the language?

de

What is the locale code for the language?

de-DE

What help will you need?

For now, no help needed.

Implementation Checklist

  • Create new site file
  • Set up Netlify project
  • Register new domain name
  • Set up Google Analytics
  • Set up Carbon Ads

Participation

  • I am willing to submit a pull request for this change.

Additional comments

It will probably take me several weeks to finish the translations, so if you guys are in a hurry to get this done, I may not be the right person for this task.

Bug: Flags don't show up in language selector in Chromium

URL(s)

https://es.eslint.org
https://es.eslint.org/languages

What did you do?

Scroll all the way to the bottom to the language picker.

What did you expect to happen?

To see a flag next to "Spanish (ES)" as in Firefox/Windows:
firefox-language-picker

What actually happened?

I just saw "ES" instead of the flag. From Chrome/Windows:
chrome-language-picker

Participation

  • I am willing to submit a pull request for this issue.

Additional comments

This appears on all language sites, not just Spanish.

Algolia Search

So, we're going to need to get the Algolia account details. Then we'll want to look into how to customize the markup and styles so that the search results are accessible and styled in accordance with the new design system.

Keep `eslintbot` in `all_authors.json`

We have added eslintbot into all_authors.json because it will be the default author for release blog posts.

But our data update script overwrites all_authors.json with the list of authors from existing blog posts, so it will always remove eslintbot. This just happened in db3b33b

Bug: rendered <p> tags on donate page, FAQ section

URL(s)

Donate page: https://new.eslint.org/donate/

What did you do?

  • Navigate on the Donate page
  • Scroll to the FAQ section
  • See the description including <p> tags.

What did you expect to happen?

<p> and </p> should not be part of the description content.

What actually happened?

<p> and </p> are rendered but as plain text.

Participation

  • I am willing to submit a pull request for this issue.

Additional comments

No response

Add data to data files

Data files

The src/_data/ directory contains a few json files. These files contain data globally available to the site, used to pull in and display that data in the templates and pages.

@nzakas Could you kindly start adding data to the following files when you're able to?

  • sponsors.json — the list of sponsors. Every sponsor has an image which you should place in the assets/images/sponsors directory, a name, and a URL to the sponsor's Web site (or other link). The list of backers has their images placed in the sponsors/backers directory, but we can move them into the /sponsors/ directory if you prefer.
  • authors.json — the list of people who have contributed articles to the site.
  • team.json — the ESLint team, categorized into the four main categories as represented on the Team page (technical steering committee, reviewers, committers, and alumni)
  • donations.json — donations information: who donated, how much they donated, when they donated, and their name, logo, and a link (if there is one, I'm not sure if the images in the donations list are clickable or not).

Let me know if you have any questions. ^_^

Update /team page with new team members

We recently created two new teams, and we need to get those displayed on the /team page:

  • Website Team - The people who maintain eslint.org.
  • Support Team - The people who answer questions in Discord, on our mailing lists, and in discussions.

These should appear, in this order, on the /team page.

Steps

  • Update tools/fetch-team-data.js - I believe you just need to include the new teams in this section and then update here. This will generate the src/_data/team.json file.
  • Update the HTML template
  • Add the strings for the team name and descriptions to each file in the src/_data/sites directory. It's okay to use English for all of the sites -- we will need to get those translated later.

Sitemaps

We will have an additional sitemap at https://eslint.org/docs/latest/sitemap.xml, but will search engine crawlers be aware of it? Should we add a sitemap index file?

Also, we are using domain-relative URLs in <loc>, for example <loc>/blog/2014/01/breaking-change-formatter/</loc>. Per https://www.sitemaps.org/protocol.html#locdef this URL must begin with the protocol.

Update dropdown markup for accessibility

Pulling from eslint/playground#6 (comment), just so we don't forget:

@snitin315 The problem isn't with the styles, it's with the markup. The code isn't accessible and it's also not even properly operable by keyboard. Styles can be overridden but the markup is where the accessibility is built into. Changing the styles is not enough.

Oh, I see. I will work on migrating to the accesible select component you provided once everything else is done.

Bug: (from-the-blog partial contains harcoded word: "View all posts")

URL(s)

https://github.com/eslint/eslint.org/blob/main/src/_includes/partials/from-the-blog.html#L12

What did you do?

I just noticed it while navigating through the blogs

What did you expect to happen?

replace the hardcoded word by a dynamic variable, so its content will change according to its language

What actually happened?

since it is hardcoded only English version will be shown.

Participation

  • I am willing to submit a pull request for this issue.

Additional comments

already submit a PR: 276

The description of the donate page seems to use incorrect grammar

URL(s)

https://eslint.org/donate/

What did you do?

The donate page uses the following description, which contains a grammatical error:

Donate

ESLint relies on donations for ongoing maintenance and development. There are currently 184 companies, organizations, and individuals are donating $9,337.00 each month to help us out.

This description is rendered from the following:

description: >
ESLint relies on donations for ongoing maintenance and development.
There are currently BACKER_COUNT companies, organizations, and individuals
are donating MONTHLY_DONATIONS each month to help us out.

What did you expect to happen?

I expected the description of the donate page to have correct grammar.

What actually happened?

The description of the donate page uses two instances of 'are' in its final sentence, and the second of which seems incorrect without a leading 'which' or similar correction.

Participation

  • I am willing to submit a pull request for this issue.

Rebuild and publish playground after releases

Ideally, after each ESLint release the playground would be automatically re-built with the new version of ESLint and published.

This looks like a good case for the use of Netlify build hooks, assuming that the build hooks trigger all of build -> deploy -> publish.

Add author bio partials to include in blog posts

@nzakas 11ty is going to throw an error for every author whose bio is not available as a partial, since we are asking it to include that partial in the blog posts where that author is rendered.

When you can find the time, please add the bios for the authors in the partials/author_bios directory.

Thank you <3

Suggestion: Improve UX of rules managing in Playground

What problem do you want to solve?

Since the https://eslint.org redesign, in order to add a rule in Playground you need to add it manually:

  1. Click on Choose a rule combo box
  2. Find a desired rule in a very long list of all available rules
  3. Click on it
  4. Click on Add this rule

This four steps you need to repeat manually for every rule you want to add. That's a tedious and time burning work.

What do you think is the correct solution?

Just use an UX from the previous version of https://eslint.org, where you could just click on "Enable all rules" and moreover, all rules have been grouped by the types with a good visualization, which made it extremely easy to maintain an ESLint config.

Poor UX. It would take me hours to find and add all required rules:
25_121209
Plus, everytime I click on Add this rule, page is automatically scrolled to the place, where a rule has been added, then I need manually scroll back to the head of a page to add another rule. It's a torture!

Good UX. Just with several clicks get a perfect eslintrc.json:
25_120844
And the UI is clean, spacious and not to overloaded, in contrast to the new one.

Participation

  • I am willing to submit a pull request for this change.

Additional comments

Please, consider returning the former Playground UX, so we could generate eslintrc.json within several clicks.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.