DEV Community

subbiah chandru
subbiah chandru

Posted on

3 1

Do not pollute your app root

eslint, prettier, webpack, etc,. pollutes the root of a project with lot's of config files

Instead of having them in app root, most libraries allow you to configured custom path for the files

Let's see how to use customize paths for eslint, prettier and webpack

I usually place all config files into config folder

Config folder

To customize eslint and prettier path create .vscode/settings.json in root of your folder and copy below configs

// NOTE:(VSCODE) Availalbe vscode settings.json variables https://code.visualstudio.com/docs/editor/variables-reference.
{
  // NOTE:(VSCODE) On save eslint, prettier and all other configured extensions will be executed the saved file/files.
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  },
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "eslint.options": {
    // NOTE:(ESLINT) Adding path for eslint config files, we don't need this if config files are in root of the aplication.
    "overrideConfigFile": "./config/.eslintrc",
    // NOTE:(ESLINT) Adding path for eslint ignore files, we don't need this if config files are in root of the aplication.
    "ignorePath": "./config/.eslintignore"
  },
  // NOTE:(PRETTIER) Adding path for prettier config files, we don't need this if config files are in root of the aplication.
  "prettier.configPath": "./config/.prettierrc",
  // NOTE:(PRETTIER) Adding path for prettier ignore files, we don't need this if config files are in root of the aplication.
  "prettier.ignorePath": "./config/.prettierignore"
}
Enter fullscreen mode Exit fullscreen mode

To use custom webpack path use —config

{
    "scripts": {
        "build:dev": "webpack --config config/webpack.config.js",
    }
}
Enter fullscreen mode Exit fullscreen mode

AWS GenAI LIVE image

Real challenges. Real solutions. Real talk.

From technical discussions to philosophical debates, AWS and AWS Partners examine the impact and evolution of gen AI.

Learn more

Top comments (0)

Qodo Takeover

Introducing Qodo Gen 1.0: Transform Your Workflow with Agentic AI

Rather than just generating snippets, our agents understand your entire project context, can make decisions, use tools, and carry out tasks autonomously.

Read full post

Best practices for optimal infrastructure performance with Magento

Running a Magento store? Struggling with performance bottlenecks? Join us and get actionable insights and real-world strategies to keep your store fast and reliable.

Tune in to the full event

DEV is partnering to bring live events to the community. Join us or dismiss this billboard if you're not interested. ❤️