Code standards - Hoa0/project-tech GitHub Wiki

Code standards die ik gebruikt hebt tijdens dit project

HTML5

• nette html code
• leerbaar zijn voor screenreaders
• headings levels
• code zijn goed ingesprongen

CSS

• style document wordt voorzien van comments waarin duidelijk wordt aangegeven waar deze styling bij hoort. /* button style */
• elementen met dezelfde styling worden aangegeven met classes.
• code zijn goed ingesprongen.

JavaScript

• variabelen definiëren met trefwoorden const en let
• code afsluiten met ;
• code zijn goed ingesprongen.
• benamingen, namen beginnen altijd met kleine letters. Bij namen met twee of meerdere woorden, begint elke volgende woord met een hoofdletter.

Template Enige: EJS

• vieuws/layout gebruiken om template hergebruiken.
• voor de head, header en footer is er gebruik gemaakt van een views/layout

Linters

In dit project heb ik gebruik gemaakt van een ESLinter voor het opsporen van fouten in javascript code en code consistent te houden. In de file .eslintrc.js bevindt de configuratie, hieronder weergegeven:

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: ["eslint:recommended", "plugin:@typescript-eslint/recommended"],
  parser: "@typescript-eslint/parser",
  parserOptions: {
    ecmaVersion: 12,
    sourceType: "module",
  },
  plugins: ["@typescript-eslint"],
  rules: {
    indent: ["error", "tab"],
    "linebreak-style": ["error", "unix"],
    quotes: ["error", "double"],
    semi: ["error", "always"],
  },
};

Formatter

Voor het testen van een formatter had ik prettier geïnstalleerd alleen werkt de tool nog niet. In VSCode is er een standard shortcut die ervoor zorgt dat je files mooi ingesprongen worden.

//laptop Mac
shift + option + F