Ajouter code linting
Opened this issue · 7 comments
Voilà en gros ce que je trouve chez moi. Le "problème" c'est que tout est installé automatiquement par vue-cli create
dans mon cas, donc je n'ai jamais monté le tooling from scratch.
Plugin vscode : https://github.com/Microsoft/vscode-eslint
Dans le settings.json de vscode :
"eslint.validate": [
{
"language": "vue",
"autoFix": false
},
{
"language": "html",
"autoFix": false
},
{
"language": "javascript",
"autoFix": false
}
],
.eslintrc.js
à côté du package.json
module.exports = {
root: true,
env: {
node: true
},
extends: [
'plugin:vue/essential',
'@vue/standard'
],
parserOptions: {
parser: 'babel-eslint'
},
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
}
}
.editorconfig
à la racine du projet
[*.{js,jsx,ts,tsx,vue}]
indent_style = space
indent_size = 2
trim_trailing_whitespace = true
insert_final_newline = true
Et probablement des dépendances à installer, du genre (ce que j'ai chez moi) :
yarn add @vue/eslint-config-standard babel-eslint eslint eslint-plugin-import eslint-plugin-node eslint-plugin-promise eslint-plugin-standard eslint-plugin-vue --dev
Référence potentiellement intéressante : https://alligator.io/vuejs/eslint-vue-vetur/
Si j'essaie dans ton projet:
vi frontend/.eslintrc.js
module.exports = {
root: true,
env: {
node: true
},
extends: [
'plugin:vue/essential',
'@vue/standard'
],
parserOptions: {
parser: 'babel-eslint'
},
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
}
}
yarn add @vue/eslint-config-standard babel-eslint eslint eslint-plugin-import eslint-plugin-node eslint-plugin-promise eslint-plugin-standard eslint-plugin-vue --dev
Après je peux faire:
npx eslint components/**.vue
par exemple
Après réflexion, je me demande si le plus simple ne serait pas de repartir d'un projet Nuxt vierge, avec le nuxt-app
qui te fait la conf eslint qui va bien. Ca + https://github.com/Microsoft/vscode-eslint, ça devrait le faire.
yarn create nuxt-app test-nuxt
yarn create v1.22.4
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...
[4/4] 🔨 Building fresh packages...
success Installed "create-nuxt-app@2.15.0" with binaries:
- create-nuxt-app
create-nuxt-app v2.15.0
✨ Generating Nuxt.js project in test-nuxt
? Project name test-nuxt
? Project description My classy Nuxt.js project
? Author name Alexandre Bulté
? Choose programming language JavaScript
? Choose the package manager Yarn
? Choose UI framework Vuetify.js
? Choose custom server framework None (Recommended)
? Choose Nuxt.js modules (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Choose linting tools (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Choose test framework None
? Choose rendering mode Single Page App
? Choose development tools (Press <space> to select, <a> to toggle all, <i> to invert selection)
notes pour plus tard : trailing spaces Visual Code Studio Julien / standard... cf : https://standardjs.com
gros linting dans cette PR : #14
avec ce fix : https://fr.nuxtjs.org/guide/development-tools/#eslint-et-prettier
en gros eslint est installé mais ne run pas par défaut... on peut faire npm run lint
pour voir où sont les erreurs et npm run lintfix
pour en corriger un maximum... reste qu'il y aura du cleaning à faire fichier par fichier à l'occasion
les lignes 237-244 dans le fichier nuxt.config.js
permettent de lancer ESlint en mode dev, mais bon pour le moment ça fait bcp de cleaning
j'ai installé StandardJS et fait un gros cleaning ici => #60
une fois la PR #60 acceptée on pourra fermeer cette issue