Adil Imran es un programador que ha estado trabajando en este campo durante mucho tiempo, compartiendo su experiencia, mejores prácticas y observaciones con colegas en su blog. El
nuevo artículo de Adil trata sobre herramientas que lo ayudan a escribir un código hermoso y limpio que funcione bien.
Del autor: desea escribir un buen código, pero no sabe por dónde empezar, intente leer esto y aquello, ponga en práctica lo que lee. Pero aún así, hay más preguntas que respuestas. ¿Es necesario eliminar el código "muerto"? ¿Qué hacer si se encuentra una variable no utilizada en un proyecto ya escrito? ¿Cómo encontrar patrones problemáticos y arreglar todo? Estas preguntas son importantes, y muchos de nosotros estamos tratando de responderlas. Pero lo mejor es hacer todo bien desde cero, para que no tenga que buscar áreas problemáticas y agujeros de parche, perdiendo el tiempo. Para crear un buen código, hay varias herramientas que se pueden llamar indispensables.
Los ejemplos que cubriremos en este artículo son relevantes para React, aunque lo que lee puede aplicarse a casi cualquier proyecto web.
Skillbox recomienda: Curso práctico "Profession Web Developer" .
Le recordamos: para todos los lectores de "Habr": un descuento de 10.000 rublos al registrarse en cualquier curso de Skillbox con el código de promoción "Habr".
La lista completa de herramientas de artículos está aquí:
- Más bonita
- ESLint
- Automatizar formato y pelusa al guardar
- Husky
- Con pelusa
- Con Husky y pelusa combinada
- EditorConfig
Comencemos con Prettier
Esta herramienta es un optimizador de código reflexivo.
¿Por qué es necesario?Limpia el código ya hecho. Solo imagine que necesita optimizar unas 20 mil líneas. Prettier hará todo esto de forma automática y rápida.
Es simple de usar y fácil de adaptar para usted: varios equipos están trabajando para mejorar Prettier, por lo que puede elegir la versión que más le convenga.
Si eres un programador principiante que quiere escribir un código hermoso pero no sabe por dónde empezar, prueba Prettier.
InstalaciónDebe crear una carpeta llamada aplicación, y dentro de la carpeta escriba en la línea de comando lo siguiente:
npm init -y
Este comando creará el archivo package.json.
A continuación, nos ocupamos de las dependencias.
yarn add --dev prettier
Después de ejecutar el comando, aparece lo siguiente dentro del archivo recién creado:
{ "name": "react-boiler-plate", "version": "1.0.0", "description": "A react boiler plate", "main": "src/index.js", "author": "Adeel Imran", "license": "MIT", "scripts": { "prettier": "prettier --write src/**/*.js" }, "devDependencies": { "prettier": "^1.14.3" } }
A continuación, cree una carpeta src / dentro de la carpeta de la aplicación. Y dentro del archivo src / index.js. En realidad puedes nombrarlo como quieras, lo principal es insertar esto en su cuerpo:
let person = { name: "Yoda", designation: 'Jedi Master ' }; function trainJedi (jediWarrion) { if (jediWarrion.name === 'Yoda') { console.log('No need! already trained'); } console.log(`Training ${jediWarrion.name} complete`) } trainJedi(person) trainJedi({ name: 'Adeel', designation: 'padawan' });
Ahora tenemos src / app / index.js con código torpe.
Puede realizar las siguientes operaciones en él:
- formatear manualmente;
- utilizar la automatización;
- no hacer nada (dejar ir las cosas y seguir adelante).
La tercera opción es mejor no elegir, de lo contrario, ¿por qué necesitamos herramientas para optimizar el código? Elija la segunda opción. Tenemos una dependencia y un script Prettier dentro de nuestro archivo package.json.
Ahora cree prettier.config.js en la carpeta de la aplicación.
module.exports = { printWidth: 100, singleQuote: true, trailingComma: 'all', bracketSpacing: true, jsxBracketSameLine: false, tabWidth: 2, semi: true, };
printWidth le permite asegurarse de que el código no exceda los 100 caracteres;
singleQuote convierte todas las comillas dobles a simples;
trailingComma verificará todas las comas colgantes en el código, especialmente al final de la última propiedad del objeto. Se explica
aquí.bracketSpacing gestiona espacios en literales de objeto:
If bracketSpacing is true - Example: { foo: bar } If bracketSpacing is false - Example: {foo: bar} jsxBracketSameLine JSX- ">"
tabWidth define el número de espacios en el nivel de sangría.
semi - si las impresiones verdaderas; al final de la declaración.
Aquí hay una
lista completa de opciones con las que Prettier puede trabajar.
Una vez que la configuración inicial esté lista, puede hacer el script.
"Más bonito": "más bonito - escriba src / ** / *. Js"
En el ejemplo anterior, el script busca todos los archivos .js en la carpeta src /.
-write indica la necesidad de guardar archivos de código optimizados.
Ejecutemos el script:
hilo más bonito
Si tiene algún problema con el ejemplo,
aquí está el repositorio donde puede encontrar todo preparado.
ESLint
Esta herramienta analiza el código para ayudar a detectar patrones problemáticos que no cumplen con las reglas y estándares. Funciona para la mayoría de los lenguajes de programación.
¿Por qué es necesario cuando se aplica a JavaScript?Debido a que JavaScript es un lenguaje bastante gratuito, los desarrolladores a menudo cometen errores. ESLint lo ayuda a encontrar problemas sin ejecutar un programa escrito.
¿Cómo se destaca ESLint entre los suyos?Es fácil de configurar, es muy flexible. Puede agregar y eliminar reglas si es necesario; literalmente, todo está configurado. Por lo tanto, puede formatear el código de acuerdo con el conjunto de reglas que utiliza.
Ahora dos guías de estilo son las más relevantes:- Guía de estilo de JavaScript de Google
- Guía de estilo de JavaScript de Airbnb
En cuanto a mí, recomiendo la segunda opción. Él es muy popular, puedes verificar esto yendo a
su GitHub .
Primero, actualice nuestro archivo package.json:
{ "name": "react-boiler-plate", "version": "1.0.0", "description": "A react boiler plate", "main": "src/index.js", "author": "Adeel Imran", "license": "MIT", "scripts": { "lint": "eslint --debug src/", "lint:write": "eslint --debug src/ --fix", "prettier": "prettier --write src/**/*.js" }, "husky": { "hooks": { "pre-commit": "lint-staged" } }, "lint-staged": { "*.(js|jsx)": ["npm run lint:write", "git add"] }, "devDependencies": { "babel-eslint": "^8.2.3", "eslint": "^4.19.1", "eslint-config-airbnb": "^17.0.0", "eslint-config-jest-enzyme": "^6.0.2", "eslint-plugin-babel": "^5.1.0", "eslint-plugin-import": "^2.12.0", "eslint-plugin-jest": "^21.18.0", "eslint-plugin-jsx-a11y": "^6.0.3", "eslint-plugin-prettier": "^2.6.0", "eslint-plugin-react": "^7.9.1", "husky": "^1.1.2", "lint-staged": "^7.3.0", "prettier": "^1.14.3" } }
Qué significa cada opción:
eslint : esta es la herramienta principal para trabajar con código nativo.
babel-eslint :
útil si trabaja con Flow o características experimentales que aún no son compatibles con ESLint.
eslint-config-airbnb : este paquete proporciona al desarrollador la configuración ESLint de Airbnb.
eslint-plugin-babel: complemento complementario para babel-eslint.
eslint-plugin-react: optimiza para reaccionar.
eslint-plugin-import: proporciona la capacidad de trabajar con la sintaxis de importación / exportación ES2015 + (ES6 +).
eslint-plugin-prettier: optimiza la interacción de ESLint con Prettier.
Con las cosas básicas terminadas, comencemos. Por ejemplo, cree un archivo .eslintrc.js en la aplicación / carpeta.
module.exports = { env: { es6: true, browser: true, node: true, }, extends: ['airbnb', 'plugin:jest/recommended', 'jest-enzyme'], plugins: [ 'babel', 'import', 'jsx-a11y', 'react', 'prettier', ], parser: 'babel-eslint', parserOptions: { ecmaVersion: 6, sourceType: 'module', ecmaFeatures: { jsx: true } }, rules: { 'linebreak-style': 'off', // Don't play nicely with Windows. 'arrow-parens': 'off', // Incompatible with prettier 'object-curly-newline': 'off', // Incompatible with prettier 'no-mixed-operators': 'off', // Incompatible with prettier 'arrow-body-style': 'off', // Not our taste? 'function-paren-newline': 'off', // Incompatible with prettier 'no-plusplus': 'off', 'space-before-function-paren': 0, // Incompatible with prettier 'max-len': ['error', 100, 2, { ignoreUrls: true, }], // airbnb is allowing some edge cases 'no-console': 'error', // airbnb is using warn 'no-alert': 'error', // airbnb is using warn 'no-param-reassign': 'off', // Not our taste? "radix": "off", // parseInt, parseFloat radix turned off. Not my taste. 'react/require-default-props': 'off', // airbnb use error 'react/forbid-prop-types': 'off', // airbnb use error 'react/jsx-filename-extension': ['error', { extensions: ['.js'] }], // airbnb is using .jsx 'prefer-destructuring': 'off', 'react/no-find-dom-node': 'off', // I don't know 'react/no-did-mount-set-state': 'off', 'react/no-unused-prop-types': 'off', // Is still buggy 'react/jsx-one-expression-per-line': 'off', "jsx-a11y/anchor-is-valid": ["error", { "components": ["Link"], "specialLink": ["to"] }], "jsx-a11y/label-has-for": [2, { "required": { "every": ["id"] } }], // for nested label htmlFor error 'prettier/prettier': ['error'], }, };
Agregue el archivo .eslintignore a la aplicación / carpeta.
/.git
/.vscode
nodo_módulos
¿Qué hace el archivo .eslintrc.js?
A ver:
module.exports = { env:{}, extends: {}, plugin: {}, parser: {}, parserOptions: {}, rules: {}, };
env: El entorno define variables globales que ya están predefinidas. Los entornos disponibles en nuestro caso son es6, un navegador y un nodo. Es6 pondrá a disposición ECMAScript 6 excepto los módulos. El navegador agregará todas las variables globales como Windows. En consecuencia, el nodo agregará todas las variables de nodo globales.
extend: matriz de cadenas: cada configuración adicional amplía las anteriores. En este momento estamos usando reglas de linting con airbnb que se extienden a broma y luego a broma-enzima.
Complementos: estas son las reglas básicas de linting que queremos usar. Trabajamos con babel, import, jsx-a11y, react, más bonito y todo lo que especifiqué anteriormente.
analizador: ESLint usa Espree de manera predeterminada, pero como estamos trabajando con babel, debe usar
Babel-ESLint .
parserOptions: cuando cambiamos el analizador predeterminado de Espree a babel-eslint, necesitamos aclarar parserOptions.
reglas: cualquier regla que podamos cambiar o reemplazar aquí.
Si todo está claro, hablemos de .eslintignore. Esta opción ayuda a indicar todas las rutas que no es necesario procesar con ESLint. Solo uso tres de estos caminos:
/.git: cuando no quiero afectar mis archivos git
/.vscode, ya que trabajo con VS Code, y este editor tiene su propia configuración, que debe especificarse para cada proyecto y no quiero entrar aquí.
node_modules: tampoco toco las dependencias, así que las agregué a la lista.
Eso es todo, hablemos de los scripts recién agregados para nuestro package.json.
"Lint": "eslint --debug src /"
"Lint: write": "eslint --debug src / --fix"$ yarn lint: al ejecutar este comando, verifica todos sus archivos en src /, como resultado obtiene un registro detallado con una descripción de los lugares problemáticos en cada archivo, donde se encontrarán los errores, que luego puede iniciar y corregir manualmente.
$ yarn lint: write: este comando hace casi lo mismo que el anterior. La única diferencia es que el hilo ya tiene permiso de escritura aquí: el comando corrige los errores eliminándolos del código.
Entonces, bueno, si resististe hasta este momento, entonces el honor y la alabanza sean para ti.
Husky
Bueno, aquí puede realizar algunas acciones durante una confirmación o inserción de código en una rama.
Todo lo que necesitas hacer es instalar Husky:
hilo añadido --dev huskyA continuación, agregue el fragmento al archivo package.json:
"husky": { "hooks": { "pre-commit": "YOUR_COMMAND_HERE", "pre-push": "YOUR_COMMAND_HERE" } },
Ahora, cada vez que se realiza una confirmación o inserción, el fragmento iniciará la ejecución de un determinado script o comando, por ejemplo, un comando de formateo de código.
Con pelusa
Ayuda a evitar que el código incorrecto entre en su rama git.
¿Por qué usar pelusa?La verificación del código en la mayoría de los casos debe realizarse antes de la confirmación. Por lo tanto, puede evitar que entren errores en el repositorio y mejorar la calidad general del programa. Pero lanzar pelusa para todo el proyecto es un proceso bastante lento, y los resultados del procesamiento pueden ser irrelevantes. Al final, solo necesita procesar los archivos que desea confirmar.
Todo lo que necesitas hacer es instalar el proyecto:
añadir hilo --dev en pelusaA continuación, agregue esto al archivo package.json:
"lint-staged": { "*.(js|jsx)": ["npm run lint:write", "git add"] },
Entonces ejecutas lint: write, luego lo agregas al área del escenario. El comando funciona para archivos .js y .jsx, pero puede hacer lo mismo para otros archivos si lo desea.
Combinando Husky y pelusa puesta en escena
Cada vez que confirma su código, se ejecuta un script llamado lint-staged. Inicia la ejecución de npm run lint: write, que le permite verificar y formatear el código. Luego, el código ya verificado cae en la etapa de la etapa y se ejecuta la confirmación.
El archivo package.json final debería verse así:
{ "name": "react-boiler-plate", "version": "1.0.0", "description": "A react boiler plate", "main": "src/index.js", "author": "Adeel Imran", "license": "MIT", "scripts": { "lint": "eslint --debug src/", "lint:write": "eslint --debug src/ --fix", "prettier": "prettier --write src/**/*.js" }, "husky": { "hooks": { "pre-commit": "lint-staged" } }, "lint-staged": { "*.(js|jsx)": ["npm run lint:write", "git add"] }, "devDependencies": { "babel-eslint": "^8.2.3", "eslint": "^4.19.1", "eslint-config-airbnb": "^17.0.0", "eslint-config-jest-enzyme": "^6.0.2", "eslint-plugin-babel": "^5.1.0", "eslint-plugin-import": "^2.12.0", "eslint-plugin-jest": "^21.18.0", "eslint-plugin-jsx-a11y": "^6.0.3", "eslint-plugin-prettier": "^2.6.0", "eslint-plugin-react": "^7.9.1", "husky": "^1.1.2", "lint-staged": "^7.3.0", "prettier": "^1.14.3" } }
Ahora cada vez que lo haces
$ git add.
$ git commit -m "algún mensaje descriptivo aquí"el código se formateará automáticamente según las reglas del archivo .eslintrc.js.
Hable sobre EditorConfig
Primero, cree el archivo .editorconfig en el directorio app /. Inserte el siguiente código en él:
# EditorConfig is awesome: http://EditorConfig.org # top-most EditorConfig file root = true [*.md] trim_trailing_whitespace = false [*.js] trim_trailing_whitespace = true # Unix-style newlines with a newline ending every file [*] indent_style = space indent_size = 2 end_of_line = lf charset = utf-8 insert_final_newline = true max_line_length = 100
Aquí hay una lista de editores que admiten
EditorCondig . La lista incluye lo siguiente: tormenta web, código de aplicación, Atom, eclipse, emacs, bbedit.
El código anterior hace esto:
- Elimina los espacios en blanco de los archivos .md y .js.
- Especifica el estilo de sangría en lugar de espacios.
- Establece el tamaño de la sangría en 2.
- Lleva el final de la línea a un solo estándar.
- Agrega una nueva línea al final del archivo.
- Establece la longitud de la cadena a 100 caracteres.
En realidad, ahora todo está listo. Si necesita código fuente,
aquí está .
Skillbox recomienda: