Developer
Code Formatting

Code Formatting

Now let's set up our code formatting styles by using some popular libraries!

Installing Prettier

This is a very popular code formatting library. Here are the required configurations for our Discord app project!

npm install --save-dev --save-exact prettier

Then, create an empty config file to let editors and other tools know you are using Prettier (opens in a new tab):

node --eval "fs.writeFileSync('.prettierrc','{}\n')"

Now, add this configurations:

.prettierrc
{
  "printWidth": 100,
  "semi": false,
  "singleQuote": true,
  "trailingComma": "all",
  "tabWidth": 2,
  "useTabs": false,
  "arrowParens": "avoid"
}
You can add more formatting configurations like this!

Installing Eslint

ESLint (opens in a new tab) is also a very good library, so we will use this library too! Here are the ESLint configurations as per Discord.js!

npm install --save-dev eslint

Now, create .eslintrc and add your rules:

nsCore config.

.eslintrc
{
  "env": {
    "browser": false,
     "node": true,
     "es2021": true
  },
   "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": 12,
    "sourceType": "module"
   },
   "plugins": ["@typescript-eslint"],
   "extends": [
     "eslint:recommended",
   ],
  "rules": {
    "no-console": "off"
   }
 }

Plugings

Since we are using ESLint with Prettier, it's beneficial to use a plugin for better integration. To set up plugins, install the necessary dependencies first:

npm i eslint-plugin-prettier

Add the Prettier plugin to your ESLint configuration in .eslintrc:

.eslintrc
{
  "env": {
    "browser": false,
    "node": true,
    "es2021": true
  },
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": 12,
    "sourceType": "module"
  },
  "plugins": ["@typescript-eslint"],
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:node/recommended",
    "prettier"
  ],
  "rules": {
    "no-console": "off",
    "node/no-unsupported-features/es-syntax": [
      "error",
      {
        "ignores": ["modules"]
      }
    ],
    "@typescript-eslint/no-unused-vars": ["error", { "argsIgnorePattern": "^_" }],
    "@typescript-eslint/explicit-module-boundary-types": "off",
    "@typescript-eslint/no-explicit-any": "off",
    "@typescript-eslint/ban-ts-comment": "off"
  }
}

You can find a list of all of ESLint's rules on their website (opens in a new tab).

This configuration extends the core vitals for the app and includes the recommended settings for Prettier, ensuring that ESLint and Prettier work together seamlessly.

Alright, we're all set! Now we can proceed further.

SettingsIgnoring Files