Ajouter code linting - Githubissues

abulte commented 4 years ago

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/

abulte commented 4 years ago

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

abulte commented 4 years ago

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)