Formatting

Each code line should be correct and the whole code is semantically correct.The development tool allows automation to improve the code, suggest and fix errors.

ESlint

ESlint is a tool for static JavaScript and TypeScript code analysis. It helps us not only to maintain pure code, but often prevents errors. It is a must-have element of any project. Eslint is a library that allows you to define code rules. The library does not impose any specific rules in itself, but gives users tools to define them independently. Of course, in addition to the possibility of using immediately built-in rules, we have the opportunity to create our own plugins and modules that provide new functionalities. Eslint himself can work in two modes:

• sprawdzanie czy nasz kod spełnia reguły, które sobie zdefiniowaliśmy - idealne do CI/CD;
• automatyczna naprawa naszego kodu tak aby spełniał reguły.

Prettier

Prettier is the open source library for code formatting.He catches syntax errors, automatically improves code lines according to the defined configuration.It is ideal for larger projects implemented by many developers and, like Eslint, forces the same standards.

Configuration files

.eslintrc.json

{
  "root": true,
  "env": {
    "browser": true,
    "es2020": true,
    "jest": true,
    "node": true
  },
  "extends": [
    "plugin:vue/vue3-essential",
    "eslint:recommended",
    "@vue/eslint-config-typescript",
    "@vue/eslint-config-prettier"
  ],
  "parserOptions": {
    "ecmaVersion": "latest"
  },
  "rules": {
    "semi": ["error", "never"],
    "quotes": ["error", "single"],
    "comma-dangle": ["error", "never"]
  }
}

.prettierrc.json

{
  "tabWidth": 2,
  "useTabs": false,
  "semi": false,
  "trailingComma": "none",
  "singleQuote": true,
  "plugins": ["prettier-plugin-tailwindcss"]
}

.vscode/settings.json

{
  "editor.formatOnSave": true,
  "editor.quickSuggestions": {
    "strings": true
  }
}