new-project-bootstrap.md

Setting up a new project

Why

After starting new projects there's always a couple of dependencies to add and configure that follows a pattern. For now, I don't like the idea of having a boilerplate so this gist is like a guide with a path for those configurations, with the basic idea of having a well-structured codebase :)

Stack

• ESLint/Prettier
• Absolute imports
  • Web
  • Native
• Git hooks

---

ESLint / Prettier

first of all, install dependencies:

npx install-peerdeps --dev eslint-config-airbnb

yarn add -D prettier eslint-plugin-prettier babel-eslint eslint-config-prettier

Obs: If using TypeScript, check this guide for aditional dependencies

create a .eslintrc.js file with the following structure:

module.exports = {
  extends: ['airbnb', 'plugin:prettier/recommended', 'prettier/react'],
  plugins: ['react', 'prettier'],
  parser: 'babel-eslint',
  rules: {
    'react/jsx-filename-extension': [1, { extensions: ['.js', '.jsx'] }]
  }
};

create a .prettierrc file with the following structure:

{
  "arrowParens": "avoid",
  "bracketSpacing": true,
  "insertPragma": false,
  "jsxBracketSameLine": false,
  "jsxSingleQuote": true,
  "proseWrap": "always",
  "quoteProps": "as-needed",
  "requirePragma": false,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "none",
  "useTabs": false,
  "printWidth": 80
}

configure project scripts on your package.json:

"lint": "eslint src --ext .js",
"lint:fix": "npm run lint -- --fix",
"prettier:fix": "prettier --write src/**/*.js"

Absolute imports (babel module resolver)

TypeScript

install babel mode resolver:

yarn add -D babel-plugin-module-resolver

now configure your .tsconfig.json to handle absolute paths:

...
"compilerOptions": {
  ...,
  "paths": {
    "@/*": ["./src/*"]
  }
}

ok, now you're good to jump to the common section and configure babel.

JavaScript

install more dependencies:

yarn add -D eslint-plugin-import eslint-import-resolver-babel-module babel-plugin-module-resolver

add rules to .eslintrc.js:

...
settings: {
  'import/resolver': {
    'babel-module': {}
  }
}

if using vscode, create jsconfig.json on project root folder:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "exclude": ["node_modules"]
}

Common (both JavaScript and TypeScript)

now, configure babel to handle absolute imports on your babel configuration file:

{
  ...
  "plugins": [
    ...
    [
      "module-resolver",
      {
        "root": ["."],
        "alias": {
          "@": "./src",
        }
      }
    ]
  ]
}

Git hooks (husky + lint-staged)

Add lint-staged with husky:

npx mrm lint-staged

after that, configure the lint-staged rules on package.json to run both eslint and prettier, like so:

"lint-staged": {
  "*.{js,jsx}": [
    "eslint --fix",
    "prettier --write"
  ]
}