Add prettier

[ManuGowda]

Description

We should apply the code formatter to maintain the standards

• Add prettierignore and .prettierrc.json
• Apply the format to codebase
• Configure git hooks to format for all commits
• Add husky pre-commit hook to enforce lint check passes before commit

Motivation

• Maintain standards across projects
• Well formatted codebase

Additional Information

• https://prettier.io/
• Reference configuration https://github.com/LiskHQ/lisk-core/blob/development/.prettierrc.json
• External reference: https://www.aleksandrhovhannisyan.com/blog/format-code-on-save-vs-code-eslint/

[clemente-xyz]

Recommended steps to leave it running:

• Add prettier config file .prettierrc with basic configs (on root dir of the project):

{
    "printWidth": 100,
    "singleQuote": true,
    "trailingComma": "all",
    "useTabs": true,
    "arrowParens": "avoid"
} 

• Edit .eslintrc configs to include:

 "extends": [
    "plugin:react/recommended",
    "plugin:prettier/recommended"
    //...
  ],
"plugins": [
    "prettier",
    //...
],
"rules": [
    "prettier/prettier": "error",
    //...
]

• Add .prettierignore file on root dir of the project.
• Enable your code editor to support lint with Prettier (recommended to configure format on save). Instructions here

[soroushm]

here is my prefrence for the preittier

.prettierrc.js

module.exports = {
  printWidth: 120,
  tabWidth: 2,
  semi: false,
  singleQuote: true,
  bracketSpacing: true,
  arrowParens: 'always',
  trailingComma: 'es5',
}

most the difrence is

• tabWith: 2 - default (prefer use space over tab)
• arrowParens: 'always' - default ( prefer parantes always for arrow function )
• bracketSpacing: true - default
• trailing-commas: 'es5' - default
• semi: false - custom semicolon less - read this article

.eslintrc

 module.exports = {
 "parser": "babel-eslint",
  env: {
    jest: true,
    browser: true,
    node: true,
    es6: true,
  },
  settings: {
    react: {
      version: 'detect',
    },
    import/resolver : {}
  },
  plugins: [
    'react',  
    'prettier', 
    'jsx-a11y', 
    'react-hooks',
  ],
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:prettier/recommended',
    'prettier',
    'prettier/react',
    'prettier/standard',
  ],
  rules: {
    // overrides rules
    'no-case-declarations': 'off',
    'react/prop-types': 'off',
    'react-hooks/rules-of-hooks': 'warn', //avoid resolve tons of issues
    'react-hooks/exhaustive-deps': 'warn',  //avoid resolve tons of issues
    'prettier/prettier': [
      'error',
      {
        printWidth: 120,
        tabWidth: 2,
        semi: false,
        singleQuote: true,
        bracketSpacing: true,
        arrowParens: 'always',
        trailingComma: 'es5',
      },
    ],
    'no-console': 0,
  },
}

pre commit hooks - documents

package.json

  "husky": {
    "hooks": {
      "pre-commit": "pretty-quick --staged"
    }
  },

[clemente-xyz]

here is my prefrence for the preittier

.prettierrc.js

module.exports = {
  printWidth: 120,
  tabWidth: 2,
  semi: false,
  singleQuote: true,
  bracketSpacing: true,
  arrowParens: 'always',
  trailingComma: 'es5',
}

most the difrence is

• tabWith: 2 - default (prefer use space over tab)
• arrowParens: 'always' - default ( prefer parantes always for arrow function )
• bracketSpacing: true - default
• trailing-commas: 'es5' - default
• semi: false - custom semicolon less - read this article

.eslintrc

 module.exports = {
 "parser": "babel-eslint",
  env: {
    jest: true,
    browser: true,
    node: true,
    es6: true,
  },
  settings: {
    react: {
      version: 'detect',
    },
    import/resolver : {}
  },
  plugins: [
    'react',  
    'prettier', 
    'jsx-a11y', 
    'react-hooks',
  ],
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:prettier/recommended',
    'prettier',
    'prettier/react',
    'prettier/standard',
  ],
  rules: {
    // overrides rules
    'no-case-declarations': 'off',
    'react/prop-types': 'off',
    'react-hooks/rules-of-hooks': 'warn', //avoid resolve tons of issues
    'react-hooks/exhaustive-deps': 'warn',  //avoid resolve tons of issues
    'prettier/prettier': [
      'error',
      {
        printWidth: 120,
        tabWidth: 2,
        semi: false,
        singleQuote: true,
        bracketSpacing: true,
        arrowParens: 'always',
        trailingComma: 'es5',
      },
    ],
    'no-console': 0,
  },
}

pre commit hooks - documents

package.json

  "husky": {
    "hooks": {
      "pre-commit": "pretty-quick --staged"
    }
  },

I also prefer by far 2 spaces instead of 4 on tabs! On the .prettierrc, i would maintain "printWidth": 100, or even less, 80

[soroushm]

@ClementeSerrano as we like to have readable name sometimes function names is get long its the reson i like to keep it on 120 but prettier and eslint should take care of destructuring

[clemente-xyz]

so, we all agree with @soroushm settings? I do!

[clemente-xyz]

guys?

[clemente-xyz]

Guys I also propose to add a precommit hook for linting with Husky, so we ensure linting is applied on every code change :)