DEV Community

subbiah chandru
subbiah chandru

Posted on

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

Top comments (0)