La guia de platanus
  • README
  • Acuerdos
    • Guía de Estilo
      • Ejemplo: Módulo para variables de entorno
  • Stack
    • Getting Started
    • Nuestro MVC extendido
    • Ruby/Rails
      • Power Types
        • General
        • Patrones
          • Commands
          • Utils
          • Services
          • Values
          • Observers
      • Potassium
      • Power API
      • Active Admin
        • General
        • Active Admin Addons
      • Pundit
      • Shrine
        • General
        • Manejo y procesamiento de imágenes
      • Pry
      • Strong Migrations
      • Data Migrate
      • Active Job
      • Gems
      • Engines - Modularización en Rails
    • JavaScript
      • Vue
        • General
        • Testing
      • AlpineJS
    • CSS
    • Mobile
      • Expo
      • React Navigation
      • Redux
        • Crear y conectar una slice en Redux
      • Styling
        • Usando Tailwind en React Native
      • Recursos
    • Resolviendo problemas (debugging)
    • Machine Learning
  • Setup
    • Configuración de tu entorno local
      • Instalación Base
        • OSX
        • Windows
        • Linux
      • Tecnologías
        • Ruby
        • Docker
        • Node
      • Herramientas
        • Linters
        • Editores
          • IDE/Editores de Código
            • Visual Studio Code
            • Sublime Text
        • Git
    • Configuración de proyectos
      • Getting Started
      • Heroku
      • Rails
      • Circle CI
      • Vue
      • Apple App Store
      • Google Play
      • Expo
      • S3
      • Git
      • Cloudflare
      • Sendgrid
      • Dominio + Mailing
      • Google Tag Manager, Analytics, Search Console, etc.
        • Google Tag Manager
          • Configurar Google Tag Manager
        • Google Analytics
        • Indexación en Google
        • Google Ads
      • Crear un bucket de S3
      • SlackBot
      • Google BigQuery
  • Deployment
    • Rails
    • Ruby Gems
    • Browser and Node (Open Source)
    • Mobile
      • Mobile Resources
      • Apple App Storage
      • Google Play
  • Upgrades
    • Upgrade de Vue 2 a Vue 3
    • Migración Hound → reviewdog
    • Upgrade de Postgresql
Con tecnología de GitBook
En esta página
  • Linters
  • Tips
  • Plugins
  • VScode
  • Sublime
  • Vim
  1. Setup
  2. Configuración de tu entorno local
  3. Herramientas

Linters

AnteriorHerramientasSiguienteEditores

Última actualización hace 1 año

Linters

Usamos rubocop para Ruby, eslint para JS y stylelint para CSS. Actualmente incluimos estos linters como dependencias de desarrollo en nuestros proyectos tanto en el package.json como el Gemfile. Debido a esto, no se necesita instalar nada aparte y basta con correr yarn install y bundle install.

Además de los linters, cada proyecto incluye archivos con sus reglas.

En el Gemfile verás que la versión de rubocop está restringida. Hay que tener cuidado al modificarla ya que hasta hace un tiempo no seguían Semantic Versioning y es puede pasar que un cambio en el minor introduzca breaking changes como cambio de nombre de alguna regla que podría estar definida en el proyecto.

Tips

  • Antes de hacer un commit recuerda revisar los warnings de los linters

  • Deberías fijarte solo en los warnings sobre el código que estás tocando, no es necesario corregir todos los problemas que tenga un archivo antes de agregar una feature en este

  • Si se debe arreglar un warning puntual sobre un código de tú rama que ya se commiteo una opción es hacer el cambio con un rebase o fixup, cambiando el commit en el que se introdujo el problema. Esto para dejar la historia más limpia evitando los commits del tipo style(): fix linter warnings

Plugins

Para correr los linters de manera más cómoda, podemos instalar los siguientes plugins:

VScode

    • Puedes hacer que al guardar un archivo .rb se autocorrijan la mayoría de las infracciones. Para que esto funcione, debes incluir lo siguiente en el settings.json de tu VSCode (hint: para abrirlo presiona cmd+shift+p y busca el comando "Preferences: Open Settings (JSON)):

      "[ruby]": {
        "editor.formatOnSave": true,
        "editor.defaultFormatter": "Shopify.ruby-lsp",
      },
    • Puedes hacer que al guardar un archivo .js/ .vue se autocorrijan la mayoría de las infracciones, incluyendo el orden de las clases de tailwind si el proyecto incluye el plugin correspondiente. Para que esto funcione, debes incluir lo siguiente en el settings.json de tu VSCode (hint: para abrirlo presiona cmd+shift+p y busca el comando "Preferences: Open Settings (JSON)):

      "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
      },

Sublime

Vim

Configurar los linters para que funcionen solo con vim puede ser un poco enredado. Una alternativa es usar VSCode con sus extensiones de linters y , alcanzando así un punto medio entre la experiencia de uso de un editor más moderno y las features de vim.

Ruby
ES
stylelint
Linter
Ruby
ES
stylelint
esta extensión de Vim