InTech Prettier Rules

Welcome to the "InTech Prettier Rules" repository, a centralized solution for managing and applying consistent code formatting standards across all projects at InTech. This repository hosts a custom Prettier configuration designed to enforce a unified coding style, helping to ensure readability and reducing formatting discrepancies in collaborative projects.

🗂️ Table of Contents

1. Installation
   1. Requirements
   2. Step 1: install the Prettier extension for VSCode
   3. Step 2: install Prettier and the InTech rules
   4. Step 3: create the Prettier configuration
   5. (Optional) Step 4: manage your plugins
   6. Step 5: enjoy 🎉
2. Import sorter configuration recommendations

⚙️ Installation

Add the Prettier InTech Rules on your existing project.

📋 Requirements

• NPM version >= 9
• Node.js version >= v18.18.0

1️⃣ Step 1: install the Prettier extension for VSCode

• https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

Create a .vscode/settings.json file with the following configuration at the root of your project:

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
}

2️⃣ Step 2: install Prettier and the InTech rules

Go to the folder of your project and execute the following command:

npm install -D prettier '@intech.lu/prettier-config'

3️⃣ Step 3: create the Prettier configuration

At the root of the folder of your project, create an .prettierrc.mjs file with the following content:

import intechPrettierConfig from '@intech.lu/prettier-config';

export default intechPrettierConfig;

If you need to override the InTech Rules for some reason, simply do it by overriding existing rules in your .prettierc.js

import intechPrettierConfig from '@intech.lu/prettier-config';

export default {
  ...intechPrettierConfig,
  semi: false, // will switch InTech 'semi' rules from true to false
};

⚠️ NB: You should override the rules after destructuring the InTech Prettier config

Overriding import sorter configuration

The InTech Prettier comes with the @trivago/prettier-plugin-sort-imports, a plugin that sorts import declarations based on Regular Expression order.

The default InTech configuration is the following:

importOrder: ['<THIRD_PARTY_MODULES>', '@/(.*)', '^[./]'],
importOrderSeparation: true,

Here's an example with our configuration (based on https://github.com/trivago/prettier-plugin-sort-imports example):

Input

import React, {
    FC,
    useEffect,
    useRef,
    ChangeEvent,
    KeyboardEvent,
} from 'react';
import { logger } from '@/core/logger';
import { reduce, debounce } from 'lodash';
import { Message } from './Message';
import { createServer } from '@/server/node';
import { Alert } from '@/ui/Alert';
import { repeat, filter, add } from './utils';
import { initializeApp } from '@/core/app';
import { Popup } from '@/ui/Popup';
import { createConnection } from '@/server/database';

Output

import { debounce, reduce } from 'lodash';
import React, {
    ChangeEvent,
    FC,
    KeyboardEvent,
    useEffect,
    useRef,
} from 'react';

import { initializeApp } from '@/core/app';
import { logger } from '@/core/logger';
import { createConnection } from '@/server/database';
import { createServer } from '@/server/node';
import { Alert } from '@/ui/Alert';
import { Popup } from '@/ui/Popup';

import { Message } from './Message';
import { add, filter, repeat } from './utils';

To change this order, you'll have to override the importOrder option in your .prettierrc.mjs file.

import intechPrettierConfig from '@intech.lu/prettier-config';

export default {
  ...intechPrettierConfig,
  importOrder: [<YOUR_OWN_ORDER>],
};

We strongly recommend that you keep the importOrderSeparation option set to true as this improves the readability of your imports.

For more information on how to configure this import sorter, see the plugin Github page.

4️⃣ (Optional) Step 4: manage your plugins

The InTech Prettier comes with the @trivago/prettier-plugin-sort-imports plugin by default and we strongly recommend that you don't remove it, as it really helps to read your import declarations.

That said, if you still wish to remove it, simply empty the plugins option of your .prettierc.js file:

import intechPrettierConfig from '@intech.lu/prettier-config';

export default {
  ...intechPrettierConfig,
  plugins: [],
};

Adding new plugins

To add new prettier plugins, install them in your project, import the plugins option from InTech Prettier and override it by merging the InTech plugins with yours.

import intechPrettierConfig from '@intech.lu/prettier-config';

const { plugins } = intechPrettierConfig;

export default {
  ...intechPrettierConfig,
  plugins: [...plugins, '<YOUR_PLUGINS>'],
};

For instance, to add the official prettier plugin-xml, install the plugin with:

npm install --save-dev @prettier/plugin-xml

or if you're using yarn:

yarn add --dev @prettier/plugin-xml

Then add this plugins in your .prettierrc.mjs file.

import intechPrettierConfig from '@intech.lu/prettier-config';

const { plugins } = intechPrettierConfig;

export default {
  ...intechPrettierConfig,
  plugins: [...plugins, '@prettier/plugin-xml'],
};

You can now add the rules from this plugin inside the .prettierrc.mjs file.

5️⃣ Step 5: enjoy 🎉

You now have the InTech Prettier rules applied automatically to your project.

💡 Import sorter configuration recommendations

Here are some recommendations for configuring the importOrder option in the @trivago/prettier-plugin-sort-imports plugin with different frameworks:

• Native JS / TS

You can use the default order provided by InTech Rules. As a reminder, here's the config:

importOrder: ['<THIRD_PARTY_MODULES>', '@/(.*)', '^[./]']

• Angular

importOrder: ['^@angular/(.*)', '^(rxjs|rxjs/(.*))', '<THIRD_PARTY_MODULES>', '@/(.*)', '^[./]']

• React

importOrder: ['^react(.*)', '<THIRD_PARTY_MODULES>', '@/(.*)', '^[./]']