{"id":3419,"date":"2022-09-12T09:31:09","date_gmt":"2022-09-12T09:31:09","guid":{"rendered":"http:\/\/the-codest.localhost\/blog\/javascript-tools-in-action\/"},"modified":"2026-03-09T13:09:12","modified_gmt":"2026-03-09T13:09:12","slug":"javascriptove-nastroje-v-akci","status":"publish","type":"post","link":"https:\/\/thecodest.co\/cs\/blog\/javascript-tools-in-action\/","title":{"rendered":"N\u00e1stroje Javascript v akci"},"content":{"rendered":"\n

It’s awesome to see where Javascript<\/a><\/strong> is these days and how much it has evolved sinceES2015<\/code>, the days of var<\/code> and $(.submitBtn)<\/code> are far away behind us<\/a>. As javascript keeps
evolving, the tools (formatter, linter, bundler) around it keeps getting better, we are going to see in this article how ESLint<\/a> (linter), Prettier<\/a> (formatter) and Husky<\/a> (Git hooks) can improve your developer experience and have a great impact on your application. For the sake of this article we are going to use a React<\/a><\/code> app, but keep in mind that these tools can be used with any Javascript\/Node application. We’ll start things by generating a React project<\/a> using vite<\/code> with these steps:<\/p>\n\n\n\n

npm create vite@latest\nProject name: js-tools\nSelect a framework: react\nSelect a variant: react\ncd js-tools\nnpm install<\/code><\/pre>\n\n\n\n
ESLint for Code Quality<\/h2>\n\n\n\n
ESLint<\/strong> is a tool that helps you find and fix problems in your JavaScript code<\/a>. To add it to our
app we’ll follow these steps:<\/p>\n\n\n\n
cd js-tools\nnpm init @eslint\/config\n# we'll need to answer these questions to initialize the config\nHow would you like to use ESLint? To check syntax and find problems\nWhat type of modules does your project use? JavaScript modules (import\/export)\nWhich framework does your project use? React\nDoes your project use TypeScript<\/a>? No\nWhere does your code run? Browser\nWhat format do you want your config file to be in? Javascript\nWould you like to install them now? Yes\nWhich package manager do you want to use? npm\n# we are going to install additional plugins\nnpm i --save-dev eslint-plugin-react-hooks eslint-plugin-jsx-a11y<\/code><\/pre>\n\n\n\n
This will create a .eslintrc.cjs<\/code> file containing our ESLint<\/strong> config in the root of our app, let’s
update the config file with our installed plugins and add a rule<\/strong>:<\/p>\n\n\n\n
const error = 2;\n\nmodule.exports = {\n  env: {\n    browser: true,\n    es2021: true,\n  },\n  extends: [\n    'eslint:recommended',\n    'plugin:react\/recommended',\n    'plugin:react\/jsx-runtime',\n    'plugin:react-hooks\/recommended',\n    'plugin:jsx-a11y\/recommended',\n  ],\n  parserOptions: {\n    ecmaFeatures: {\n      jsx: true,\n    },\n    ecmaVersion: 'latest',\n    sourceType: 'module',\n  },\n  plugins: ['react'],\n  rules: {\n    'no-unused-vars': error,\n  },\n  settings: {\n    react: {\n      version: 'detect',\n    },\n  },\n  ignorePatterns: ['node_modules', '.eslintrc.cjs', 'dist'],\n};<\/code><\/pre>\n\n\n\n
We are using the recommended settings for each plugin and made the no-unused-vars<\/code> throw an error, an additional step is to add a lint<\/code> command to our package.json<\/code> file as follows:<\/p>\n\n\n\n
{\n  ...,\n    \"scripts\": {\n        \"dev\": \"vite\",\n        \"build\": \"vite build\",\n        \"preview\": \"vite preview\",\n        \"lint\": \"eslint --ext js<\/a>,jsx .\"\n    },\n  ...\n}<\/code><\/pre>\n\n\n\n
Now that our ESLint setup<\/strong> is ready, we are going to update our app to do some testing and see
how it works. The first thing to do is to update the App.jsx<\/code> file inside the src<\/code> folder, this component contains an image, a basic video player and a button that toggles the video player
play\/pause states when clicked:<\/p>\n\n\n\n
import { useEffect, useRef, useState } from 'react';\n\nexport default function () {\n  const videoRef = useRef(null);\n  const [isPlaying, setIsPlaying] = useState(false);\n  const heading = 'Hello ESLint + Prettier + Husky';\n\n  useEffect(() => {\n    if (!isPlaying) {\n      videoRef.current.play();\n    } else {\n      videoRef.current.pause();\n    }\n  }, []);\n\n  const togglePlay = () => setIsPlaying(!isPlaying);\n\n  return (\n    <div>\n      <button type=\"button\" onClick={togglePlay}>\n        {isPlaying ? 'Pause' : 'Play'}\n      <\/button>\n\n      <div>\n        <video\n          loop\n          playsInline\n          ref={videoRef}\n          src=\"https:\/\/interactive-examples.mdn.mozilla.net\/media\/cc0-videos\/flower.mp4\"\n        \/>\n      <\/div>\n\n      <div>\n        <img src=\"https:\/\/interactive-examples.mdn.mozilla.net\/media\/cc0-images\/grapefruit-slice-332-332.jpg\" \/>\n      <\/div>\n    <\/div>\n  );\n}\n\n<\/code><\/pre>\n\n\n\n
import { useEffect, useRef, useState } from 'react';\n\nexport default function () {\nconst videoRef = useRef(null);\nconst [isPlaying, setIsPlaying] = useState(false);\nconst heading = 'Hello ESLint + Prettier + Husky';\n\nuseEffect(() => {\nif (!isPlaying) {\nvideoRef.current.play();\n} else {\nvideoRef.current.pause();\n}\n}, []);\n\nconst togglePlay = () => setIsPlaying(!isPlaying);\n\nreturn (\n\n<div>\n    <video\n      loop\n      playsInline\n      ref={videoRef}\n      src=\"https:\/\/interactive-examples.mdn.mozilla.net\/media\/cc0-videos\/flower.mp4\"\n    \/>\n  <\/div>\n\n  <div>\n    <img src=\"https:\/\/interactive-examples.mdn.mozilla.net\/media\/cc0-images\/grapefruit-slice-332-332.jpg\" \/>\n  <\/div>\n<\/div>\n);\n}<\/code><\/pre>\n\n\n\n
Let’s try and see what running the lint<\/code> command will report about our App.jsx<\/code> code:<\/p>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n
We have 4 errors great or not so great should I say, we’ve just caught multiple type of errors some are related to React, some to a11y, and one is due to the rule that we’ve added to forbid unused variables. What’s great about ESLint is that it catches errors for you and give us an indication on the solution and all the rules are very well documented. So to fix our code we’ll need to:<\/p>\n\n\n\n
– Give a name to our component<\/p>\n\n\n\n
– Use the `heading` variable or just delete it if it is useless<\/p>\n\n\n\n
– Add a `track` tag for captions in the video player<\/p>\n\n\n\n
– Add an `alt` attributes with meaningful text to the image element<\/p>\n\n\n\n
After applying these fixes running the `lint` command, we receive no errors, our fixed code is as follows:<\/p>\n\n\n\n
  import { useEffect, useRef, useState } from 'react';\n\nexport default function App() {\nconst videoRef = useRef(null);\nconst [isPlaying, setIsPlaying] = useState(false);\nconst heading = 'Hello ESLint + Prettier + Husky';\n\nuseEffect(() => {\nif (!isPlaying) {\nvideoRef.current.play();\n} else {\nvideoRef.current.pause();\n}\n}, [isPlaying]);\n\nconst togglePlay = () => setIsPlaying(!isPlaying);\n\nreturn (\n\n{heading}\n\n<div>\n    <video\n      loop\n      playsInline\n      ref={videoRef}\n      src=\"https:\/\/interactive-examples.mdn.mozilla.net\/media\/cc0-videos\/flower.mp4\"\n    >\n      <track kind=\"captions\" src=\"flower-en.vtt\" srcLang=\"en\" \/>\n    <\/video>\n  <\/div>\n\n  <div>\n    <img\n      alt=\"Grapefruit slice atop a pile of other slices\"\n      src=\"https:\/\/interactive-examples.mdn.mozilla.net\/media\/cc0-images\/grapefruit-slice-332-332.jpg\"\n    \/>\n  <\/div>\n<\/div>\n);\n}<\/code><\/pre>\n\n\n\n
It is a little annoying to have to use the lint<\/code> command before each commit and one could forget to do that, setting up a git hook could be helpful to automate this task and solve this problem and that’s what we are going to talk about in the Husky<\/a> section.<\/p>\n\n\n\n
Prettier for code formatting<\/h2>\n\n\n\n
Prettier<\/strong>\u00a0is an opinionated code formatter that supports many languages and integrates with many code editors. Let’s add prettier to our app:<\/p>\n\n\n\n
npm install --save-dev --save-exact prettier<\/code><\/code><\/pre>\n\n\n\n
We’ll need to create two files at the root of our app a .prettierignore<\/code> file to ignore files or folders we don’t want to format:<\/p>\n\n\n\n
node_modules\/\ndist\/\npublic\/<\/code><\/code><\/pre>\n\n\n\n
And a\u00a0.prettierrc.json<\/code>\u00a0file that will contain our prettier config:<\/p>\n\n\n\n
{\r\n\"arrowParens\": \"always\",\r\n\"bracketSameLine\": false,\r\n\"bracketSpacing\": true,\r\n\"endOfLine\": \"lf\",\r\n\"embeddedLanguageFormatting\": \"auto\",\r\n\"htmlWhitespaceSensitivity\": \"css\",\r\n\"insertPragma\": false,\r\n\"jsxSingleQuote\": false,\r\n\"printWidth\": 80,\r\n\"proseWrap\": \"always\",\r\n\"quoteProps\": \"as-needed\",\r\n\"requirePragma\": false,\r\n\"semi\": true,\r\n\"singleQuote\": true,\r\n\"tabWidth\": 2,\r\n\"trailingComma\": \"all\",\r\n\"useTabs\": true\r\n}<\/code><\/pre>\n\n\n\n
Prettier config is customizable, you can play with the prettier playground to find the settings that fits you the most. An additional step to make prettier work well with\u00a0ESLint<\/strong>\u00a0is to install an additional ESLint plugin:<\/p>\n\n\n\n
npm i --save-dev eslint-config-prettier<\/code><\/code><\/pre>\n\n\n\n
We’ll also need to update the .eslintrc.cjs<\/code> file by adding prettier<\/code> to the extends<\/code> array, we need to make sure to put it in the last<\/strong> position to override other configs:<\/p>\n\n\n\n
const error = 2;\n\nmodule.exports = {\n...,\nextends: [\n'eslint:recommended',\n'plugin:react\/recommended',\n'plugin:react\/jsx-runtime',\n'plugin:react-hooks\/recommended',\n'plugin:jsx-a11y\/recommended',\n'prettier',\n],\n...<\/code><\/pre>\n\n\n\n
Running prettier is easy and straightforward, one way is to run the npx prettier --write .<\/code> command that will format all your app code, a second way is to use it from your editor, this will get the most from Prettier, either via a keyboard shortcut or automatically whenever you save a file. When a line has gotten so long while coding that it won’t fit on your screen, just hit a key and watch it magically be wrapped into multiple lines! Or when you paste some code and the indentation gets all messed up, let Prettier fix it up for you without leaving your editor.<\/p>\n\n\n\n
But still, what if one of the developers uses an editor that doesn’t support prettier and forgets to use the prettier<\/code> command, there is a way to fix this problem and that’s the subject of the Husky<\/a> section below.<\/p>\n\n\n\n
Husky for Git hooks<\/h2>\n\n\n\n
Husky<\/strong> helps you setup git hooks to lint your commit messages, run tests, lint code, etc… when you commit or push. We are going to use it along lint-staged to automate the code linting and formatting before committing the code.<\/p>\n\n\n\n
npx husky-init && npm install\nnpm i --save-dev lint-staged<\/code><\/code><\/pre>\n\n\n\n
This will create a .husky<\/code> folder with a pre-commit<\/code> file. Next step is to update the package.json<\/code> file to setup lint-staged<\/code> command and tell it to format any changed file in the current commit:<\/p>\n\n\n\n
{\n...,\n\"scripts\": {\n\"dev\": \"vite\",\n\"build\": \"vite build\",\n\"preview\": \"vite preview\",\n\"lint\": \"eslint --ext js,jsx .\",\n\"prepare\": \"husky install\"\n},\n\"lint-staged\": {\n\"**\/*.+(js|jsx|json|css)\": \"prettier --write --ignore-unknown\"\n},\n...\n}<\/code><\/code><\/pre>\n\n\n\n
Last step is to update the pre-commit<\/code> file to setup our hook to run the lint<\/code> command on all the app and format changed files with the lint-staged<\/code> command:<\/p>\n\n\n\n
!\/usr\/bin\/env sh\n\n. \"$(dirname -- \"$0\")\/_\/husky.sh\"\n\nnpm run lint\nnpx lint-staged\n```\n\nLet's do some refactoring to our app to see how all of this works, we are going to create a VideoPlayer.jsx component and use it in App.jsx:\n\n```javascript\nimport { useEffect, useRef } from 'react';\n\nexport default function VideoPlayer({ isPlaying, videoSrc, trackSrc }) {\nconst videoRef = useRef(null);\n\nuseEffect(() => {\nif (!isPlaying) {\nvideoRef.current.play();\n} else {\nvideoRef.current.pause();\n}\n}, [isPlaying]);\n\nreturn (\n\n);\n}<\/code><\/pre>\n\n\n\n
import { useState } from 'react';\nimport VideoPlayer from '.\/VideoPlayer';\n\nexport default function App() {\nconst [isPlaying, setIsPlaying] = useState(false);\nconst heading = 'Hello ESLint + Prettier + Husky';\n\nconst togglePlay = () => setIsPlaying(!isPlaying);\n\nreturn (\n \n{heading}\n <div>\n    <VideoPlayer\n      isPlaying={isPlaying}\n      trackSrc=\"flower-en.vtt\"\n      videoSrc=\"https:\/\/interactive-examples.mdn.mozilla.net\/media\/cc0-videos\/flower.mp4\"\n    \/>\n  <\/div>\n\n  <div>\n    <img\n      alt=\"Grapefruit slice atop a pile of other slices\"\n      src=\"https:\/\/interactive-examples.mdn.mozilla.net\/media\/cc0-images\/grapefruit-slice-332-332.jpg\"\n    \/>\n  <\/div>\n<\/div>\n);\n}\n\n\n<\/code><\/pre>\n\n\n\n
Now that we are happy with our code, let’s commit our changes and see how it goes.<\/p>\n\n\n\n
\"husky<\/figure>\n\n\n\n
Errors again this time it is yelling because of missing props validation and as you can see our commit wasn’t successful. Let’s fix this, by first installing PropTypes npm i prop-types<\/code> and updating the VideoPlayer<\/code> component:<\/p>\n\n\n\n
import { useEffect, useRef } from 'react';\nimport PropTypes from 'prop-types';\n\nexport default function VideoPlayer({ isPlaying, videoSrc, trackSrc }) {\nconst videoRef = useRef(null);\n\nuseEffect(() => {\nif (!isPlaying) {\nvideoRef.current.play();\n} else {\nvideoRef.current.pause();\n}\n}, [isPlaying]);\n\nreturn (\n\n);\n}\n\nVideoPlayer.propTypes = {\nisPlaying: PropTypes.bool.isRequired,\nvideoSrc: PropTypes.string.isRequired,\ntrackSrc: PropTypes.string.isRequired,\n};<\/code><\/pre>\n\n\n\n
After fixing those errors our commit was successful after running the linting and code formatting commands. As you can see with Husky we basically automated linting and formatting with this pre-commit hook and this will avoid any unwanted code in our code base and solve problems like editors incompatibilities and forgetting to run those commands.<\/p>\n\n\n\n
\"sucessful<\/figure>\n\n\n\n
Summary<\/h2>\n\n\n\n
ESLint<\/strong>, Prettier<\/strong> and Husky<\/strong> are great tools that help us maintain our code. Combined together they provide us with a great developer experience and make maintaining our code easier.<\/p>\n\n\n\n
We’ve talked about linting and formatting in this article, but the tools available and possibilities are much wider you could setup some tests to run on a pre-commit hook or if you use Typescript, adding a type checking command with Husky<\/strong> to skip any untyped code in your app.<\/p>\n\n\n\n
\"career<\/a><\/figure>\n\n\n\n
Read more:<\/strong><\/p>\n\n\n\n
Pros and Cons of Vue<\/a><\/p>\n\n\n\n
How to Kill a Project with Bad Coding Practises<\/a><\/p>\n\n\n\n
React: Tips and Tricks<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
Objevte n\u011bkter\u00e9 n\u00e1stroje pro na\u010d\u00edt\u00e1n\u00ed JavaScript, kter\u00e9 v\u00e1m pomohou zlep\u0161it va\u0161i programovac\u00ed hru. Zjist\u011bte v\u00edce o ESLint, Prettier a Husky!<\/p>","protected":false},"author":2,"featured_media":3420,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[8],"tags":[12],"class_list":["post-3419","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-software-development","tag-it"],"acf":[],"yoast_head":"\nJavascript Tools in Action - The Codest<\/title>\n<meta name=\"description\" content=\"Discover essential JavaScript tools like ESLint, Prettier, and Husky and learn how they improve code quality, formatting, and workflow efficiency.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/thecodest.co\/cs\/blog\/javascriptove-nastroje-v-akci\/\" \/>\n<meta property=\"og:locale\" content=\"cs_CZ\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Javascript Tools in Action\" \/>\n<meta property=\"og:description\" content=\"Discover essential JavaScript tools like ESLint, Prettier, and Husky and learn how they improve code quality, formatting, and workflow efficiency.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/thecodest.co\/cs\/blog\/javascriptove-nastroje-v-akci\/\" \/>\n<meta property=\"og:site_name\" content=\"The Codest\" \/>\n<meta property=\"article:published_time\" content=\"2022-09-12T09:31:09+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-03-09T13:09:12+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/thecodest.co\/app\/uploads\/2024\/05\/javascript_tools_in_action.png\" \/>\n\t<meta property=\"og:image:width\" content=\"960\" \/>\n\t<meta property=\"og:image:height\" content=\"540\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"thecodest\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"thecodest\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/javascript-tools-in-action\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/javascript-tools-in-action\\\/\"},\"author\":{\"name\":\"thecodest\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/#\\\/schema\\\/person\\\/7e3fe41dfa4f4e41a7baad4c6e0d4f76\"},\"headline\":\"Javascript Tools in Action\",\"datePublished\":\"2022-09-12T09:31:09+00:00\",\"dateModified\":\"2026-03-09T13:09:12+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/javascript-tools-in-action\\\/\"},\"wordCount\":1088,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/javascript-tools-in-action\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/thecodest.co\\\/app\\\/uploads\\\/2024\\\/05\\\/javascript_tools_in_action.png\",\"keywords\":[\"IT\"],\"articleSection\":[\"Software Development\"],\"inLanguage\":\"cs-CZ\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/thecodest.co\\\/blog\\\/javascript-tools-in-action\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/javascript-tools-in-action\\\/\",\"url\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/javascript-tools-in-action\\\/\",\"name\":\"Javascript Tools in Action - The Codest\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/javascript-tools-in-action\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/javascript-tools-in-action\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/thecodest.co\\\/app\\\/uploads\\\/2024\\\/05\\\/javascript_tools_in_action.png\",\"datePublished\":\"2022-09-12T09:31:09+00:00\",\"dateModified\":\"2026-03-09T13:09:12+00:00\",\"description\":\"Discover essential JavaScript tools like ESLint, Prettier, and Husky and learn how they improve code quality, formatting, and workflow efficiency.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/javascript-tools-in-action\\\/#breadcrumb\"},\"inLanguage\":\"cs-CZ\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/thecodest.co\\\/blog\\\/javascript-tools-in-action\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"cs-CZ\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/javascript-tools-in-action\\\/#primaryimage\",\"url\":\"https:\\\/\\\/thecodest.co\\\/app\\\/uploads\\\/2024\\\/05\\\/javascript_tools_in_action.png\",\"contentUrl\":\"https:\\\/\\\/thecodest.co\\\/app\\\/uploads\\\/2024\\\/05\\\/javascript_tools_in_action.png\",\"width\":960,\"height\":540},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/javascript-tools-in-action\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/thecodest.co\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Javascript Tools in Action\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/#website\",\"url\":\"https:\\\/\\\/thecodest.co\\\/\",\"name\":\"The Codest\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/thecodest.co\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"cs-CZ\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/#organization\",\"name\":\"The Codest\",\"url\":\"https:\\\/\\\/thecodest.co\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"cs-CZ\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/thecodest.co\\\/app\\\/uploads\\\/2024\\\/03\\\/thecodest-logo.svg\",\"contentUrl\":\"https:\\\/\\\/thecodest.co\\\/app\\\/uploads\\\/2024\\\/03\\\/thecodest-logo.svg\",\"width\":144,\"height\":36,\"caption\":\"The Codest\"},\"image\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/pl.linkedin.com\\\/company\\\/codest\",\"https:\\\/\\\/clutch.co\\\/profile\\\/codest\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/#\\\/schema\\\/person\\\/7e3fe41dfa4f4e41a7baad4c6e0d4f76\",\"name\":\"thecodest\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"cs-CZ\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5dbfe6a1e8c86e432e8812759e34e6fe82ebac75119ae3237a6c1311fa19caf4?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5dbfe6a1e8c86e432e8812759e34e6fe82ebac75119ae3237a6c1311fa19caf4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5dbfe6a1e8c86e432e8812759e34e6fe82ebac75119ae3237a6c1311fa19caf4?s=96&d=mm&r=g\",\"caption\":\"thecodest\"},\"url\":\"https:\\\/\\\/thecodest.co\\\/cs\\\/author\\\/thecodest\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"N\u00e1stroje Javascript v akci - The Codest","description":"Objevte z\u00e1kladn\u00ed n\u00e1stroje JavaScript, jako jsou ESLint, Prettier a Husky, a zjist\u011bte, jak zlep\u0161uj\u00ed kvalitu k\u00f3du, form\u00e1tov\u00e1n\u00ed a efektivitu pracovn\u00edch postup\u016f.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/thecodest.co\/cs\/blog\/javascriptove-nastroje-v-akci\/","og_locale":"cs_CZ","og_type":"article","og_title":"Javascript Tools in Action","og_description":"Discover essential JavaScript tools like ESLint, Prettier, and Husky and learn how they improve code quality, formatting, and workflow efficiency.","og_url":"https:\/\/thecodest.co\/cs\/blog\/javascriptove-nastroje-v-akci\/","og_site_name":"The Codest","article_published_time":"2022-09-12T09:31:09+00:00","article_modified_time":"2026-03-09T13:09:12+00:00","og_image":[{"width":960,"height":540,"url":"https:\/\/thecodest.co\/app\/uploads\/2024\/05\/javascript_tools_in_action.png","type":"image\/png"}],"author":"thecodest","twitter_card":"summary_large_image","twitter_misc":{"Written by":"thecodest","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/thecodest.co\/blog\/javascript-tools-in-action\/#article","isPartOf":{"@id":"https:\/\/thecodest.co\/blog\/javascript-tools-in-action\/"},"author":{"name":"thecodest","@id":"https:\/\/thecodest.co\/#\/schema\/person\/7e3fe41dfa4f4e41a7baad4c6e0d4f76"},"headline":"Javascript Tools in Action","datePublished":"2022-09-12T09:31:09+00:00","dateModified":"2026-03-09T13:09:12+00:00","mainEntityOfPage":{"@id":"https:\/\/thecodest.co\/blog\/javascript-tools-in-action\/"},"wordCount":1088,"commentCount":0,"publisher":{"@id":"https:\/\/thecodest.co\/#organization"},"image":{"@id":"https:\/\/thecodest.co\/blog\/javascript-tools-in-action\/#primaryimage"},"thumbnailUrl":"https:\/\/thecodest.co\/app\/uploads\/2024\/05\/javascript_tools_in_action.png","keywords":["IT"],"articleSection":["Software Development"],"inLanguage":"cs-CZ","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/thecodest.co\/blog\/javascript-tools-in-action\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/thecodest.co\/blog\/javascript-tools-in-action\/","url":"https:\/\/thecodest.co\/blog\/javascript-tools-in-action\/","name":"N\u00e1stroje Javascript v akci - The Codest","isPartOf":{"@id":"https:\/\/thecodest.co\/#website"},"primaryImageOfPage":{"@id":"https:\/\/thecodest.co\/blog\/javascript-tools-in-action\/#primaryimage"},"image":{"@id":"https:\/\/thecodest.co\/blog\/javascript-tools-in-action\/#primaryimage"},"thumbnailUrl":"https:\/\/thecodest.co\/app\/uploads\/2024\/05\/javascript_tools_in_action.png","datePublished":"2022-09-12T09:31:09+00:00","dateModified":"2026-03-09T13:09:12+00:00","description":"Objevte z\u00e1kladn\u00ed n\u00e1stroje JavaScript, jako jsou ESLint, Prettier a Husky, a zjist\u011bte, jak zlep\u0161uj\u00ed kvalitu k\u00f3du, form\u00e1tov\u00e1n\u00ed a efektivitu pracovn\u00edch postup\u016f.","breadcrumb":{"@id":"https:\/\/thecodest.co\/blog\/javascript-tools-in-action\/#breadcrumb"},"inLanguage":"cs-CZ","potentialAction":[{"@type":"ReadAction","target":["https:\/\/thecodest.co\/blog\/javascript-tools-in-action\/"]}]},{"@type":"ImageObject","inLanguage":"cs-CZ","@id":"https:\/\/thecodest.co\/blog\/javascript-tools-in-action\/#primaryimage","url":"https:\/\/thecodest.co\/app\/uploads\/2024\/05\/javascript_tools_in_action.png","contentUrl":"https:\/\/thecodest.co\/app\/uploads\/2024\/05\/javascript_tools_in_action.png","width":960,"height":540},{"@type":"BreadcrumbList","@id":"https:\/\/thecodest.co\/blog\/javascript-tools-in-action\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/thecodest.co\/"},{"@type":"ListItem","position":2,"name":"Javascript Tools in Action"}]},{"@type":"WebSite","@id":"https:\/\/thecodest.co\/#website","url":"https:\/\/thecodest.co\/","name":"The Codest","description":"","publisher":{"@id":"https:\/\/thecodest.co\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/thecodest.co\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"cs-CZ"},{"@type":"Organization","@id":"https:\/\/thecodest.co\/#organization","name":"The Codest","url":"https:\/\/thecodest.co\/","logo":{"@type":"ImageObject","inLanguage":"cs-CZ","@id":"https:\/\/thecodest.co\/#\/schema\/logo\/image\/","url":"https:\/\/thecodest.co\/app\/uploads\/2024\/03\/thecodest-logo.svg","contentUrl":"https:\/\/thecodest.co\/app\/uploads\/2024\/03\/thecodest-logo.svg","width":144,"height":36,"caption":"The Codest"},"image":{"@id":"https:\/\/thecodest.co\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/pl.linkedin.com\/company\/codest","https:\/\/clutch.co\/profile\/codest"]},{"@type":"Person","@id":"https:\/\/thecodest.co\/#\/schema\/person\/7e3fe41dfa4f4e41a7baad4c6e0d4f76","name":"thecodest","image":{"@type":"ImageObject","inLanguage":"cs-CZ","@id":"https:\/\/secure.gravatar.com\/avatar\/5dbfe6a1e8c86e432e8812759e34e6fe82ebac75119ae3237a6c1311fa19caf4?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/5dbfe6a1e8c86e432e8812759e34e6fe82ebac75119ae3237a6c1311fa19caf4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/5dbfe6a1e8c86e432e8812759e34e6fe82ebac75119ae3237a6c1311fa19caf4?s=96&d=mm&r=g","caption":"thecodest"},"url":"https:\/\/thecodest.co\/cs\/author\/thecodest\/"}]}},"_links":{"self":[{"href":"https:\/\/thecodest.co\/cs\/wp-json\/wp\/v2\/posts\/3419","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/thecodest.co\/cs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/thecodest.co\/cs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/thecodest.co\/cs\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/thecodest.co\/cs\/wp-json\/wp\/v2\/comments?post=3419"}],"version-history":[{"count":11,"href":"https:\/\/thecodest.co\/cs\/wp-json\/wp\/v2\/posts\/3419\/revisions"}],"predecessor-version":[{"id":8269,"href":"https:\/\/thecodest.co\/cs\/wp-json\/wp\/v2\/posts\/3419\/revisions\/8269"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/thecodest.co\/cs\/wp-json\/wp\/v2\/media\/3420"}],"wp:attachment":[{"href":"https:\/\/thecodest.co\/cs\/wp-json\/wp\/v2\/media?parent=3419"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thecodest.co\/cs\/wp-json\/wp\/v2\/categories?post=3419"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thecodest.co\/cs\/wp-json\/wp\/v2\/tags?post=3419"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}