Skip to main content

Ajouter des configurations - VSCode

Cette page va lister quelques configurations pouvant être utiles en cas d'utilisation de VSCode en tant qu'IDE (Integrated Development Environment)

VSCode

Il y a 3 fichiers de VSCode qui peuvent être modifiés/créés dans le dossier .vscode : extensions.json, launch.json et settings.json

extensions.json

{
  "recommendations": [
    "pkief.material-icon-theme",
    "esbenp.prettier-vscode",
    "sonarsource.sonarlint-vscode",
    "ryanluker.vscode-coverage-gutters",
    "orta.vscode-jest",
    "pmneo.tsimporter",
    "archsense.architecture-view-nestjs"
  ]
}

launch.json

{
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "name": "ng serve",
      "type": "chrome",
      "request": "launch",
      "preLaunchTask": "npm: start",
      "url": "http://localhost:4200/"
    },
    {
      "name": "ng test",
      "type": "vscode-jest-tests",
      "request": "launch",
      "preLaunchTask": "npm: test"
    }
  ]
}

settings.json

{
  "javascript.preferences.importModuleSpecifier": "relative",
  "typescript.preferences.importModuleSpecifierEnding": "minimal",
  "typescript.preferences.importModuleSpecifier": "relative",
  "javascript.preferences.importModuleSpecifierEnding": "minimal",
  "js/ts.implicitProjectConfig.module": "ES2022",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.organizeImports": "always"
  },
  "files.associations": {
    "*.prettierrc": "json"
  },
  "jest.useDashedArgs": true,
  "jest.coverageFormatter": "GutterFormatter",
  "jest.runMode": "on-demand",
  "coverage-gutters.showLineCoverage": true,
  "coverage-gutters.showGutterCoverage": false,
  "coverage-gutters.showRulerCoverage": true
}

Node

package.json

Il faut installer :

  • npm i @types/node
  • npm i -D ng-mocks webpack-bundle-analyzer

Puis il faut ajouter, dans les scripts ;

"ng"build": "ng"nest build",
"format": "prettier --write \"src/**/*.ts\" \"test/**/*.ts\"",
"start": "ngnest serve"start",
"build": "ng build",
"build:prod": "ng build --configuration production",
"watch"start:dev": "npm run buildstart -- --watch --configuration development"watch",
"test": "ng cache clean && ng test",
"build:stats"start:debug": "npm run buildstart:dev -- --stats-json"debug",
"build:stats:start:prod": "npmnode rundist/main",
build:prod"lint": "eslint \"{src,apps,libs,test}/**/*.ts\" -- --stats-json"fix",
"analyze:bundle": "webpack-bundle-analyzer dist/project-name/stats.json",
"analyze": "npm run build:stats && npm run analyze:bundle",
"analyze:prod": "npm run build:stats:prod && npm run analyze:bundle"

Si jest est déjà installé, il faut remplacer la ligne

"test": "ng cache clean && ng test",

par les lignes

"test": "jest --verbose",
"test:watch": "npm test -- --watch",
"test:cov": "npm test -- --coverage --covergae-directory=coverage/jest"coverageReporters=lcov --coverageReporters=text --coverageReporters=text-summary --coverageReporters=html",
"test:karma"ci": "ngjest cache--ci",
clean"test:debug": "node --inspect-brk -r tsconfig-paths/register -r ts-node/register node_modules/.bin/jest --runInBand",
"test:e2e": "jest --config ./test/jest-e2e.json",
"prepare": "husky",
"postversion": "node set-sonar-version.js && nggit test",add sonar-project.properties && git commit -m \"Updating project version\" && git push --tags && git push --all -n"

TypeScript Config

Dans le fichier tsconfig.json, il est possible et recommandé d'ajouter cette ligne dans la catégorie compilerOptions

"esModuleInterop": true,
"strict": true

Prettier

Il faut, pour le configurer, placer un fichier .prettierrc à la racine du projet. Voilà un exemple de ce qu'il pourrait contenir ;

{
  "singleQuote": true,
  "arrowParens": "avoid",
  "proseWrap": "always",
  "htmlWhitespaceSensitivity": "ignore",
  "bracketSameLine": true,
  "printWidth": 120,
  "useTabs": false,
  "jsxSingleQuote": true,
  "trailingComma": "none"all",

  "singleAttributePerLine": false,
  "semi": true,
  "tabWidth": 2,
  "bracketSpacing": true,
  "embeddedLanguageFormatting": "auto",
  "endOfLine": "lf",
  "insertPragma": false,
  "quoteProps": "as-needed",
  "requirePragma": false,
  "vueIndentScriptAndStyle": false
}

Back to top