JavaScript ​

• We write modern JavaScript that we eventually transpile to support all the browsers we have to (see Browsers Support).
• We manage dependencies with npm (see Packages management).
• We use EsLint and Prettier to ensure consistency.

Code styling ​

We combine a set of EsLint rules (to avoid errors, ensure security and best practices) with Prettier (to enforce a certain style).

Setup ​

Install dependencies:

npm i -D eslint prettier eslint-config-prettier eslint-plugin-prettier @liip-lausanne/eslint-config

npm i -D eslint prettier eslint-config-prettier eslint-plugin-prettier @liip-lausanne/eslint-config

Create an EsLint config file named .eslintrc.js at the project root with:

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: ['@liip-lausanne', 'prettier'],
  parserOptions: {
    ecmaVersion: 2021,
    sourceType: 'module',
  },
};

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: ['@liip-lausanne', 'prettier'],
  parserOptions: {
    ecmaVersion: 2021,
    sourceType: 'module',
  },
};

Create a Prettier config file named prettier.config.js at the project root with:

module.exports = {
  singleQuote: true,
  trailingComma: 'es5',
};

module.exports = {
  singleQuote: true,
  trailingComma: 'es5',
};

Add some scripts in your package.json to validate/format files:

// ...
"scripts": {
  // ...
  "eslint": "eslint .",
  "eslint:fix": "npm run eslint -- --fix",
  // ...
}
// ...

// ...
"scripts": {
  // ...
  "eslint": "eslint .",
  "eslint:fix": "npm run eslint -- --fix",
  // ...
}
// ...

See scripts for conventions.

Related ​

• @liip-lausanne/eslint-config
• EsLint editor integrations
• Prettier editor integrations

Testing ​

We prefer Vitest or Jest to run unit & functional tests and Cypress for end-to-end tests.

We enjoy msw to mock asynchronous requests.

Third-parties ​

Our go-to framework is Vue.js, with its friends Pinia (or Vuex on legacy projects) and/or Vue Router if necessary. In the case of a SPA, we use Create Vue to scaffold the project.

Libraries we often use accross projects:

• Lodash for utility methods
• Axios for asynchronous requests
• dayjs or date-fns to work with time and dates
• accounting.js to work with money and currencies