Automatiseer codekwaliteitscontroles en refactoring in WebStorm
description
Met deze prompt kun je de automatiseringsmogelijkheden van WebStorm benutten om moeiteloos de codekwaliteit te waarborgen en te verbeteren. Dit vermindert de tijd voor handmatige reviews, voorkomt veelgemaakte fouten en zorgt voor een consistente code stijl, wat de ontwikkelsnelheid en kwaliteit verhoogt.
prompt
Help me met het automatiseren van codekwaliteitscontroles en refactoring in WebStorm voor mijn projecttype: <voer het type project in>. Geef advies over het configureren van ...
try_prompt
generate_helper
disclaimerOnPageApi
tags
ai_answers
provider: openai
model: gpt-4.1-nano
Natuurlijk! Hier is een uitgebreide gids om codekwaliteitscontroles en refactoring in WebStorm voor jouw Node.js REST API met Express te automatiseren:
1. Inspecties configureren:
- Ga naar *File* > *Settings* (Windows/Linux) of *WebStorm* > *Preferences* (macOS).
- Navigeer naar *Editor* > *Inspections*.
- Schakel relevante inspecties in, zoals:
- *JavaScript* > *Code quality tools* (zoals ESLint, TSLint, etc.)
- *JavaScript* > *Code style* > *Predefined styles* (bijvoorbeeld Airbnb, Google, of je eigen stijl).
- Pas de instellingen aan op basis van je projectvereisten.
2. Linters integreren:
- Installeer ESLint (veelgebruikte linter voor JavaScript) in je project via npm:
```
npm install eslint --save-dev
```
- Maak een `.eslintrc.json`-bestand aan of gebruik een bestaand configuratiebestand.
- Configureer ESLint in WebStorm:
- Ga naar *File* > *Settings* > *Languages & Frameworks* > *JavaScript* > *Code Quality Tools* > *ESLint*.
- Kies voor *Automatic ESLint configuration* of stel handmatig het pad naar je ESLint executable en configbestand in.
- WebStorm zal nu automatisch ESLint-controles uitvoeren en fouten of waarschuwingen tonen.
3. Formatter instellen:
- Installeer indien nodig Prettier:
```
npm install prettier --save-dev
```
- Maak een `.prettierrc`-bestand voor je formatteringsregels.
- Configureer Prettier in WebStorm:
- Ga naar *File* > *Settings* > *Languages & Frameworks* > *JavaScript* > *Prettier*.
- Selecteer het pad naar de Prettier executable.
- Activeer de automatische formattering bij het opslaan:
- Ga naar *File* > *Settings* > *Tools* > *Actions on Save*.
- Vink *Reformat code* en *Optimize imports* aan.
4. Automatische refactorings en suggesties:
- Gebruik WebStorm’s ingebouwde refactoring-tools:
- Selecteer code en druk op *Refactor* (bijvoorbeeld *Rename*, *Extract Method*, etc.).
- Activeer code hints en suggesties:
- WebStorm biedt automatisch suggesties voor verbeteringen, zoals het vervangen van var door let/const, arrow functions, enzovoort.
- Overweeg het gebruik van *Code Cleanup*:
- Via *Code* > *Run Code Cleanup* op je hele project of geselecteerde bestanden.
- Voor meer geautomatiseerde refactoring:
- Kijk naar scripts of integraties met tools zoals *SonarQube* of *eslint --fix*.
- Je kunt npm scripts toevoegen om automatisch fixes uit te voeren:
```json
"scripts": {
"lint:fix": "eslint --fix src/"
}
```
- Voer deze scripts uit vóór commits of automatisch via CI/CD.
5. Integratie in je workflow:
- Overweeg het gebruik van pre-commit hooks met tools zoals Husky om automatisch linting en formatting uit te voeren vóór commits.
- Configureer Continuous Integration (CI) pipelines om codekwaliteit te bewaken en fouten vroeg te detecteren.
Door deze stappen te volgen, automatiseer je effectief codekwaliteitscontroles en refactoring in WebStorm, wat de onderhoudbaarheid en consistentie van je Node.js Express API aanzienlijk verbetert.
provider: deepseek
model: deepseek-chat
Zeker, hier is een uitgebreid advies voor het automatiseren van codekwaliteit in WebStorm voor je Node.js/Express project:
### 1. ESLint Integratie (Essentieel)
**Installatie:**
```bash
npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin
```
**Configuratie (.eslintrc.js):**
```javascript
module.exports = {
parser: '@typescript-eslint/parser',
plugins: ['@typescript-eslint'],
extends: [
'eslint:recommended',
'@typescript-eslint/recommended'
],
rules: {
'no-unused-vars': 'error',
'prefer-const': 'error',
'no-console': 'warn'
}
};
```
**WebStorm Instellingen:**
- Ga naar `Settings > Languages & Frameworks > JavaScript > Code Quality Tools > ESLint`
- Enable `Automatic ESLint configuration`
- Vink `Run eslint --fix on save` aan
### 2. Prettier voor Code Formatting
**Installatie:**
```bash
npm install --save-dev prettier eslint-config-prettier
```
**.prettierrc:**
```json
{
"semi": true,
"trailingComma": "es5",
"singleQuote": true,
"printWidth": 80,
"tabWidth": 2
}
```
**WebStorm:**
- `Settings > Languages & Frameworks > JavaScript > Prettier`
- Enable `On 'Reformat Code' action`
- Enable `On save`
### 3. WebStorm Inspecties Configuratie
Ga naar `Settings > Editor > Inspections` en enable:
**JavaScript/TypeScript:**
- Code style issues
- Potential bugs
- Unused code
- Functionality problems
**Node.js Specifiek:**
- Express.js best practices
- Async/Await handling
- Error handling patterns
### 4. Automatische Refactoring Tools
**Sneltoetsen:**
- `Ctrl+T` (Windows) / `Cmd+T` (Mac) - Refactor menu
- `F6` - Move file/class
- `Shift+F6` - Rename
**Aanbevolen refactorings:**
- Extract method/variable (`Ctrl+Alt+M`/`Ctrl+Alt+V`)
- Inline method/variable
- Extract constant
- Convert to async/await
### 5. Live Templates voor Express Patterns
Maak custom live templates voor veelgebruikte patterns:
**Express Route Template:**
```javascript
router.$METHOD$('$PATH$', async (req, res) => {
try {
$END$
} catch (error) {
res.status(500).json({ error: error.message });
}
});
```
### 6. Git Hooks voor Pre-commit Checks
**package.json scripts:**
```json
{
"scripts": {
"lint": "eslint src/**/*.ts",
"lint:fix": "eslint src/**/*.ts --fix",
"precommit": "npm run lint && npm test"
}
}
```
### 7. TypeScript Strict Mode
**tsconfig.json:**
```json
{
"compilerOptions": {
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"exactOptionalPropertyTypes": true
}
}
```
### 8. File Watchers voor Automatisering
Configureer File Watchers voor:
- Automatische linting bij bestandswijzigingen
- Auto-formatting met Prettier
- TypeScript compile checks
### 9. Project-specifieke Inspectie Profiles
Maak een custom inspection profile aan met:
- Strengere regels voor testbestanden
- Aangepaste settings voor middleware files
- Route-specifieke checks
### 10. Recommended Plugins
Installeer deze WebStorm plugins:
- String Manipulation (voor string refactoring)
- Rainbow Brackets (voor betere leesbaarheid)
- GitToolBox (voor code kwaliteit in git context)
### Belangrijkste Sneltoetsen:
- `Alt+Enter` - Quick fixes
- `Ctrl+Alt+Shift+T` - Refactoring opties
- `Ctrl+Alt+L` - Format code
- `Ctrl+Alt+O` - Organize imports
### Monitoring:
Controleer regelmatig de `Code > Inspect Code` functie voor een volledige projectanalyse en pas je configuratie aan op basis van de bevindingen.
Deze setup zorgt voor consistente codekwaliteit, automatische refactoring suggesties en onderhoudbare code stijl throughout je Express API project.