JSDoc VS javascript

I wholeheartedly agree. At most, I introduce JSDoc[1] to newer developers as standardising how parameters and whatnot are commented at least gets you better documentation and _some_ safety without adding any TS knowledge overhead.

[1] https://jsdoc.app/

This is where JSDoc comes to save the day.

The best way to do this, of course, is with JSDoc. But something I always found awkward about jsdoc is defining the object types in the same file. So, after a lot of reading, I found a way to combine JSDoc with declaration type files from Typescript. Let me give you an example:

There is a lot of specific symbols presented on the JSDOC specification that can be found here: https://jsdoc.app

JSDoc is a specification for the comment format in JavaScript. This specification allows developers to describe the structure of their code, data types, function parameters, and much more using special comments. These comments can then be transformed into documentation using appropriate tools.

Working with new features, frameworks, and tools, the experience of reading documentation is a critical part of it. I have been lucky to work with projects that feature really easy to read documentation such as USWDS and Bun, but I've also had the misfortune to work with pretty terrible documentation like JSDoc. The JSDoc documentation lacks a search field which makes searching for specific items an ordeal and also does not cover many hidden use cases. It provides less than the bare minimum for what it needs to do - a lot of the time I am forced to rely on external user documentation elsewhere to use JSDoc effectively. That was why I was drawn to the search field in particular in Docusaurus.

The Svelte team followed suit but motivated by the maintainer's developer experience as they migrated the project away from TypeScript in favor of plain JSDoc comments for type annotations instead.

Even more relevant, tools like Javadoc, JSDoc, Doxygen, etc. read comments in a specific format to generate documentation. These comments do not affect readability. On the contrary, Javadocs are great for explaining how to use these entities. Combined with tools like my dear Doctest, we even get guarantees of accuracy and correctness!

Document types with JSDoc annotations

📚 JSDoc for documentation and jsdoc-to-markdown to create docs as markdown files

// Follow Established Style Guides // Adhere to established style guides such as Airbnb JavaScript Style Guide or Google JavaScript Style Guide to maintain consistency across your codebase. // These style guides provide comprehensive rules and recommendations for variable naming, declaration, and usage. // Example: Airbnb JavaScript Style Guide // https://github.com/airbnb/javascript /** * Represents a person with a given name and age. * @typedef {Object} Person * @property {string} name - The name of the person. * @property {number} age - The age of the person. */ /** * Create a new person. * @param {string} name - The name of the person. * @param {number} age - The age of the person. * @returns {Person} - The newly created person object. */ function createPerson(name, age) { return { name, age }; } const person1 = createPerson("John", 30); const person2 = createPerson("Jane", 25); console.log(person1); console.log(person2);

Repository: airbnb/javascript

Instead of writing our own exhaustive list of JavaScript rules, we can use a ruleset defined by the developers at Airbnb, and then adjust it to suit our preferences. The Airbnb JavaScript Style Guide is well known among JavaScript developers and used by some big companies: Lonely Planet, National Geographic and Sainsburys to name a few. It’s a great place to start.

Airbnb Style Guide

# question 1: ? How would you like to use ESLint? … To check syntax only To check syntax and find problems ❯ To check syntax, find problems, and enforce code style # question 2: ? What type of modules does your project use? … ❯ JavaScript modules (import/export) CommonJS (require/exports) None of these # question 3: ? Which framework does your project use? … ❯ React Vue.js None of these # question 4 (select "No", because we won't add TypeScript support for this project): ? Does your project use TypeScript? › No / Yes # question 5: ? Where does your code run? … Browser ✔ Node # question 6: ? How would you like to define a style for your project? … ❯ Use a popular style guide Answer questions about your style Inspect your JavaScript file(s) # question 7 (we'll rely on Airbnb's JavaScript style guide here): ? Which style guide do you want to follow? … ❯ Airbnb: https://github.com/airbnb/javascript Standard: https://github.com/standard/standard Google: https://github.com/google/eslint-config-google # question 8: ? What format do you want your config file to be in? … JavaScript YAML ❯ JSON # the final prompt here is where eslint will ask you if you want to install all the necessary dependencies. Select "Yes" and hit enter: Checking peerDependencies of eslint-config-airbnb@latest The config that you have selected requires the following dependencies: eslint-plugin-react@^7.21.5 eslint-config-airbnb@latest eslint@^5.16.0 || ^6.8.0 || ^7.2.0 eslint-plugin-import@^2.22.1 eslint-plugin-jsx-a11y@^6.4.1 eslint-plugin-react-hooks@^4 || ^3 || ^2.3.0 || ^1.7.0 ? Would you like to install them now with npm? › No / Yes

Extensible : ESLint supports the use of plugins and custom rules, enabling you to extend its functionality to suit your project requirements. Notably, there are popular ESLint plugins that align with well-established coding standards and styles. Examples include Airbnb JS Style Guide and Google JS Style Guide.

An obvious pick for React projects, but eslint-plugin-react along with their plugin:react/recommended rule set is a must. This will give you some sensible rules such as requiring a key to be specified in JSX arrays. eslint-config-airbnb is another good (if a bit loose) base rule set on top of eslint-plugin-react to start from.