Getting started with ESLint

This guide will walk you through creating your ESLint configuration file using Flintable and integrating it into a new project.

From Playground

Start by visiting the Flintable platform and navigating to the Playground section. This interactive space allows you to experiment with linting rules and configurations. To provide a quick overview of what Flintable is capable of, we will go through the interface and go enable one rule : yoda. The playground consist of several key components like a language dropdown, a linter dropdown, a code editor and a plugin dropdown followed by a list of fixable rules.

Ensure all dropdowns are set to match your needs.
Scroll down the list of fixable rules and click on yoda. The code editor will display a code example demonstrating the rule's behavior, helping you understand the problem it addresses.

Once you click on the yoda rule, an options section will appear, showing the rule's name, description and official documentation. To enable the rule, click on. This action adds the rule to your configuration and activates the Rule and Configuration buttons below the code editor. Click Rule to apply the rule to the code example. The code will be updated to reflect the rule's fix:

before

if ("red" === roses) { 
    // ...
}
...

after

if (roses === "red") { 
    // ...
}
...

Code Samples

You can also write your own code in editor. But remember this is short-lived. With authentication, you can store your code samples for future use.

After enabling the rule, a Download Configuration File button will appear in the top right of the header Click this button to download your configuration file.

eslint.config.js

export default [
  {
    rules : {
      'yoda' : ["error","never"],
    }
  }
];

Configuration

This configuration is temporary. With authentication, you can store your configurations for future use.

To Project

Now let's integrate this configuration into a new project.

Create a new directory for your project:

mkdir flintable-example-project

cd flintable-example-project

Initialize Git and push your first commit:

git init

git add .

git commit -m "flint commit"

git branch -M main

git remote add origin <url>

git push origin main

Install ESLint using your preferred package manager:

npm

npm install --save-dev eslint

pnpm

pnpm add --save-dev eslint

yarn

yarn add --dev eslint

Paste your downloaded eslint.config.js configuration file into the root of your project directory.

flintable-example-project/eslint.config.js

export default [
  {
    rules : {
      'yoda' : ["error","never"],
    }
  }
];

Create a simple test file, foo.js, with the following content:

flintable-example-project/foo.js

if ("blue" === violets) {
    // ...
}

Run ESLint with the fix option to automatically fix the code:

npm

node_modules/.bin/eslint --fix foo.js

npx

npx eslint --fix foo.js

TIP

Consider using a dedicated Format on Save extension to automatically apply fixes to your code, eliminating the need for manual intervention.

Your file is now fixed.

foo.js - before

if ("blue" === violets) { 
    // ...
}
...

foo.js - after

if (violets === "blue") { 
    // ...
}
...

By following these steps, you've successfully created and integrated an ESLint configuration using Flintable. The next step is to store your configurations and code samples directly on Flintable. By authenticating, you can easily manage and reuse them in future projects, enhancing your workflow and collaboration.