Skip to content

Latest commit

 

History

History
98 lines (71 loc) · 4.34 KB

supercharge-your-dev-environment.md

File metadata and controls

98 lines (71 loc) · 4.34 KB
Raw

Supercharge your dev environment

Use this documentation to help supercharge your dev environment. We recommend using Rider or Visual Studio with ReSharper.

Set up continuous testing

We recommend setting Rider to run unit tests on save, for fast feedback on changes.

  • Go to Settings -> Plugins and check that dotCover is enabled
  • Go to Settings -> Build, Execution, Deployment -> Unit Testing -> Continuous Testing and select 'Automatically start tests in continuous testing sessions on Save'
  • Go to or open a Unit Tests session (Tests -> Create New Session), open the 'Continuous testing modes' menu and select 'Run all tests'

Analyse test coverage

This project uses a mutation score to analyse effective test coverage when opening up a new pull request. Stryker.Net is included in our dotnet-tools manifest for checking mutation score locally.

Install tools by running dotnet tool restore.

Open a terminal at the root folder and type the following to run and open a Stryker report:

dotnet stryker -o

You will be able to find all reports in the StrykerOutput folder in your project root.

Configure linting and code cleanup

We recommend setting Rider to clean code on save.

  • Open settings
  • Configure JavaScript linting
    • Go to Languages & Frameworks -> JavaScript -> Code Quality Tools -> ESLint
    • Select Manual ESLint configuration
    • In the dropdown for ESLint package, press the down arrow and select .../DfE.FindInformationAcademiesTrusts/node_modules/standard. If nothing is here then ensure you have done an npm install in the project directory
    • Tick Run ESLint --fix on save
    • Go to Editor > Code style > JavaScript
    • In the top right click Set from... and select JavaScript Standard Style
  • Configure CSS linting
    • Go to Languages & Frameworks -> Style Sheets -> Stylelint
    • Select Enable
    • In the dropdown for Stylelint package, press the down arrow and select .../DfE.FindInformationAcademiesTrusts/node_modules/styleint. If nothing is here then ensure you have done an npm install in the project directory
    • In Run for files enter: "{*/,*}.{css,scss}"
  • Configure C# linting
    • Go to Tools -> Actions on Save
    • Tick Reformat and Cleanup Code
    • Ensure that Profile is set to DfE.FindInformationAcademiesTrusts

If using Rider or Resharper then the DfE.FindInformationAcademiesTrusts.sln.DotSettings should be automatically identified and used for manual C# code cleanup.

You can also run linting on JavaScript, CSS and SCSS files using the command line:

cd DfE.FindInformationAcademiesTrusts
npm run lint ## for a list of issues
npm run lint:fix ## to scan and fix issues

Linting markdown

We use markdownlint to check for lint issues on Markdown files in the pipeline. You can install the markdownlint VS code extension to check your files locally.

Linting cypress tests

Tests are written in TypeScript and we are using typescript-eslint and eslint-plugin-cypress for linting. You can install ESLint VS code extension to highlight errors caught by the linter as you code.

Formatting cypress tests

We recommend using VS code to format your code as you work.

In your settings change these values:

  • Editor: Format On Save => ✅
  • Editor: Format On Type => ✅
  • Files: Insert Final Newline => ✅
  • TypeScript › Format: Semicolons => insert

Alternatively, you add the following to your settings.json file

{
    "editor.formatOnSave": true,
    "editor.formatOnType": true,
    "files.insertFinalNewline": true,
    "typescript.format.semicolons": "insert"
}