Style Guide

Style Guide

We will follow a combination of Google TypeScript Style Guide and the Vue Style Guide.

Naming style

Source: identifiers

Class/enums/type parameters

• PascalCase: every word is capitalized, no underscores.

  e.g. JustANormalClass, Array<T>

• Do not mark interfaces specially (NOT IMyInterface or MyFooInterface). Instead give it a name that expresses why the interface exists in the first place (e.g. class TodoItem and interface TodoItemStorage).

Variable/function/property

• camelCase: first word lowercase, every other word capitalized, no underscores.

• Private variables MUST NOT be prefixed with _

  e.g. myFunction , classVariable

Global constants (including enum values)

• UPPERCASE, words separated by underscores.

  e.g. SPECIAL_NUMBER

File names

• PascalCase

Vue-specific styling

• Base components (app-wide reusable components like a button or a modal) should all start with the same prefix (like Base or App), e.g. BaseButton.vue, AppButton.vue

• Component names should be multi-worded to prevent conflict, e.g. TodoButton instead of just Button.

• Child components that are tightly coupled with their parent should include the parent name as a prefix. [source]

  e.g. TodoList.vue, TodoListItem.vue, TodoListItemButton.vue

  Do this instead of nesting subdirectories. More detail on file structure: how to structure a large-scale Vue application

• Component names should start with the highest-level (often most general) words and end with descriptive modifying words. [source]

  SearchButtonClear.vue instead of ClearSearchButton.vue

  SearchButtonRun.vue instead of RunSearchButton.vue

• Use full words over abbreviations, e.g. StudentDashboardSettings.vue instead of SdSettings.vue

Comments

• Use /* ... */ for multiline comments and // for single-line comments.

Indentation

2 spaces

Specific sections to pay attention to

• Symbol visibility
• Instantiating primitive types

Setting up ESLint and Prettier

• [Skip this step if using Docker environment] Use the npm setup options to include JEST, ESLint, and Prettier.

  • This should automatically download the packages and create the necessary .eslintrc.js and .prettierrc files.

• Install the following VS Code extensions:

  • Vue Language Features (Volar)
  • Prettier
  • ESLint

• Open your VS Code User Settings by:

  • Opening the Command Palette (shift + cmd + P)
  • Typing “user settings” and selecting “Preferences: Open User Settings (JSON)”
  • Adding the following blocks:

  "[typescript][javascript][vue]": {
  	"editor.defaultFormatter": "esbenp.prettier-vscode",
  	"editor.tabSize": 2,
  	"editor.formatOnSave": true, // runs Prettier on save
  	"editor.codeActionsOnSave": { // lints on save
  		"source.fixAll.eslint": true
  	}
  },

• Put the following in your .prettierrc :

  "semi": true,
  "trailingComma": "all",
  "printWidth": 80,

• To fix conflicts between Prettier and ESLint, add the following under “rules” in your .eslintrc.js file

  rules: {
    indent: 0,
    "prettier/prettier": ["error", { singleQuote: false }],
    "@typescript-eslint/typedef": [
      "error",
      {
        arrowParameter: true,
        parameter: true,
      },
    ],
    // "@typescript-eslint/no-inferrable-types": "error",
    // "@typescript-eslint/interface-name-prefix": "error",
    // "@typescript-eslint/explicit-function-return-type": "error",
    // "@typescript-eslint/explicit-module-boundary-types": "error",
  },