DEV Community: r7kamura

Use ruby-lsp plugins without modifying the project's Gemfile

r7kamura — Sat, 15 Jun 2024 17:12:52 +0000

First, avoid including editor-specific configuration files in the project.

# .gitignore OR .git/info/exclude
.vscode

Next, prepare a Gemfile for ruby-lsp in the gitignored directory. If .ruby-lsp/Gemfile already exists, you can copy and paste and edit it. In this example, I will introduce a new plugin called ruby-lsp-rspec.

# .vscode/Gemfile
eval_gemfile(
  File.expand_path(
    '../Gemfile',
    __dir__
  )
)

group :development do
  gem "ruby-lsp", require: false
  gem "ruby-lsp-rails", require: false
  gem "ruby-lsp-rspec", require: false
end

Finally, change the configuration of ruby-lsp to specify the path to the Gemfile. This may be set from the GUI.

// .vscode/settings.json
{
  "rubyLsp.bundleGemfile": ".vscode/Gemfile"
}

Reloading the workspace will reflect the settings; you can also use VSCode's reloadWindow command. Currently, ruby-lsp seems to have a bug that an error occurs if this setting is changed at startup, in which case you can reload it twice.

GitHub CLI on devcontainer

r7kamura — Tue, 16 Aug 2022 08:23:35 +0000

To use the GitHub CLI (a.k.a. gh) on devcontainer, you need to pass credentials for that.

If you run gh auth login on the host side, the credentials will be stored at ~/.config/gh/hosts.yml, so mounting it on the container side will work.

Maybe it can be difficult to include this setting in docker-compose.yml since it is the developer's preference whether to use gh and devcontainer or not. In such case, it would be nice to add that setting to docker-compose.override.yml, and ignore these files from Git.

# docker-compose.override.yml
services:
  rails:
    volumes:
      - ~/.config/gh/hosts.yml:/root/.config/gh/hosts.yml

# .gitignore or .git/info/exclude
docker-compose.override.yml
.devcontainer/devcontainer.json

Normally, docker-compose command will automatically merge docker-compose.override.yml into docker-compose.yml, but in this case you need to specify it explicitly as follows:

# .devcontainer/devcontainer.json
{
  "name": "Rails",
  "dockerComposeFile": [
    "../docker-compose.yml",
    "../docker-compose.override.yml"
  ],
  "service": "rails",
  "workspaceFolder": "/workspace",
  "runServices": ["rails"]
}

Release notes management

r7kamura — Fri, 12 Aug 2022 02:27:59 +0000

How do you manage your OSS changelog or release notes?

As for myself, I don't use CHANGELOG file these days and almost exclusively use GitHub Releases.

There are 3 main reasons for this:

Managing hundreds of repositories is getting harder
GitHub Releases is getting better
CHANGELOG tends to conflict on large projects

Release notes

GitHub has the ability to automatically generate releases notes.

This feature summarizes the pull requets that have been merged with the current version. It is quite useful because it includes a link to each pull request, the name of author, and a list of contributors for that version. If you try to generate this by yourself, it's not that easy. Most of all, I like the fact that this feature is officially provided by GitHub.

If you put .github/release.yml, it also generates separate sections according to the labels attached to the pull requests. Since I like the keep-a-changelog-like format, I have prepared these 6 labels:

add
change
deprecate
fix
remove
security

Basically, I add these labels at the time of review, but even if I forget to do so, I can add them before release.

Labels

It's troublesome to prepare these labels on each repository by hand, so I've automated it by using github-label-sync-action. If you put the name, description, and color of each label in .github/labels.yml, it will automatically sync them to GitHub.

Furthermore, I would like to automate the process of preparing this configuration YAML files, so I created r7kamura/github-keepachangelog-template for that and use gitcp to copy it to the current directory.

gitcp r7kamura/github-keepachangelog-template

Workflows

I also use GitHub Actions these days to automate the process of publishing new versions, such as tags and releases. For example, with a npm package, we put the version in manifest.json. I have a workflow that detects the version change and automatically creates a new Git tag, a new GitHub Release, and so on.

Since it is time-consuming to prepare such workflows for each repository, I use Reusable workflows and organize my own workflows in r7kamura/workflows.

This is an example workflow to release my VSCode extension from vscode-ruby-light:

name: release

on:
  push:
    branches:
      - main

jobs:
  release:
    uses: r7kamura/workflows/.github/workflows/vscode-extension-release.yml@main
    secrets:
      vsce-token: ${{ secrets.VSCE_TOKEN }}

Just write this, change the version field in package.json and git push it, and it will automatically create a new git tag, a new GitHub Release with automatically generated release notes, build the extension, and publish it to the VSCode marketplace.

Wrapping up

I wrote about how I manage my release notes.

Release notes are very important source of information for users. However, I understand that it can be difficult to maintain them. I would like to be able to automate it and manage it without incurring costs.

BUNDLE_ONLY is now available

r7kamura — Tue, 09 Aug 2022 22:05:53 +0000

I recently added BUNDLE_ONLY option to Bundler.

This is the long-awaited feature from 8+ years ago that allows you to install only the gem groups you need, available from bundler 2.3.19.

For example, in our Rails app, we have a crazy number of gem groups (terrible I know). There is a workflow to run RuboCop with GitHub Actions, but this workflow only requires the gems in the rubocop gem group to be installed.

# .github/workflows/rubocop.yml
 env:
-  BUNDLE_WITHOUT: >
-    danger
-    default
-    development
-    feature1
-    feature2
-    feature3
-    feature4
-    feature5
-    feature6
-    feature7
-    mobile
-    production
-    qa
-    staging1
-    staging2
-    staging3
-    test
+  BUNDLE_ONLY: rubocop

Previously, it was necessary to use BUNDLE_WITHOUT to exclude unwanted gem groups one by one, but now BUNDLE_ONLY allows us to write this way 😃

Run YARD as RSpec

r7kamura — Thu, 04 Aug 2022 01:45:51 +0000

Let me introduce yardspec in this article.

yardspec is a Ruby gem that supports executing YARD documentation @examples as RSpec examples.

module Foo
  class Bar
    # @example returns "baz"
    #   expect(Foo::Bar.new.baz).to eq('baz')
    #
    # @example returns "bazbaz" for count 2
    #   expect(Foo::Bar.new.baz(count: 2)).to eq('bazbaz')
    #
    # @return [String]
    def baz(count: 1)
      'baz' * count
    end
  end
end

It interprets the documentation examples above as the following RSpec examples:

RSpec.describe 'Foo::Bar#baz' do
  it 'returns "baz"' do
    expect(Foo::Bar.new.baz).to eq('baz')
  end

  it 'returns "bazbaz" for count 2' do
    expect(Foo::Bar.new.baz(count: 2)).to eq('bazbaz')
  end
end

and running RSpec as follows will automatically test them.

$ bundle exec rspec

Foo::Bar#baz
  returns "baz"
  returns "bazbaz" for count 2

Finished in 0.00129 seconds (files took 0.087 seconds to load)
2 examples, 0 failures

As you may have noticed, this is the doctest concept from Rust, Python, Elixir, etc, dropped into RSpec and YARD for Ruby.

It is often helpful to include example code in your documentation and demonstrate the results of executing them. But it is important to ensure that the documentation stays up-to-date with the code.

That is the purpose for which yardspec was created. By writing example code that actually works, users can read it with confidence and try it out for themselves.

Automate RuboCop ToDo fix

r7kamura — Sat, 30 Jul 2022 09:26:25 +0000

Let me introduce rubocop-todo-corrector in this article.

ToDo list based linting

These days, many projects are using Lint tools to self-diagnose their code.

e.g.

ESLint for JavaScript
rustfmt for Rust
RuboCop for Ruby
etc.

RuboCop has the ability to detect existing offenses and automatically generate a file named .rubocop_todo.yml. This file acts as a to-do list, so we can gradually fix the offenses.

This mechanism is very powerful when introducing a new Lint tool in the middle of an existing project, or when introducing new rules by upgrading the existing Lint tool.

Automate it

The improvement process cycle would look like this:

Select one lint rule from ToDo list
Autocorrect existing offenses (or disable the rule)
Re-generate ToDo
Create a Pull Request
Review and merge the Pull Request
Repeat from 1.

However, it's difficult to do this manually. So, let's automate with rubocop-todo-corrector custom GitHub action.

rubocop-todo-corrector

It's easy to use, just place the following YAML file in your repository.

# .github/workflows/rubocop-todo-corrector.yml
name: rubocop-todo-corrector

on:
  pull_request:
    types:
      - closed
  workflow_dispatch:
    inputs:
      cop_name:
        description: Pass cop name if you want to pick a specific cop.
        required: false
        type: string
      ignore:
        description: Check this with cop_name if you want to ignore a specific cop.
        required: false
        type: boolean
jobs:
  run:
    runs-on: ubuntu-latest
    steps:
      - uses: r7kamura/rubocop-todo-corrector@v0
        with:
          ignore: ${{ inputs.ignore }}
          label: rubocop-todo-corrector

then create "rubocop-todo-corrector" label on your repository.

Now you can run this workflow by "Run workflow" button on actions page:

After the workflow is complete, a pull request is created as follows:

Review this pull request, and if it looks good, press the Merge button.

The next pull request will then be automatically created. That is, all we have to do is to press the Merge button, and the code automatically gets refactored more and more. What an easy job!

Our story

In our huge Rails app, which has been running for about 10 years, we introduced RuboCop in the middle of the process, and at first there were 200,000 offenses.

(I also described how to make this chart at Aggregate offenses count in .rubocop_todo.yml - DEV Community)

There were so many offenses that we almost gave up on fixing them, but recently we introduced rubocop-todo-corrector and the offenses slowly started decreasing.

Since its introduction about 2 months ago, we have been able to correct about 40,000+ offenses. The developers are getting used to the review & merge process, which is gradually accelerating, and it looks like we will be able to reduce offenses to almost zero in another year or so.

Wrapping up

In this article, I introduced the background and usage of a custom GitHub action called rubocop-todo-corrector.

There are other features that were not covered in this article, such as automatic reviewer assignment and disabling as well as fixing violations, so if you are interested please read the README.

Automating the refactoring process is a powerful mechanism. Let's automate more and more and keep the good code quality.

Aggregate RuboCop ToDo count

r7kamura — Tue, 26 Jul 2022 00:16:14 +0000

Are you all fighting RuboCop offenses?

Today I have written a simple Ruby script to aggregate the number of offenses in .rubocop_todo.yml, so let me share it in this article.

# aggregate_rubocop_todo_offenses.rb
require 'date'

# Aggregate up to 365 days in advance.
365.times do |i|

  # Get the 1st commit hash before `i` days.
  # The format `%H` means "commit hash". See `git log --help` for more info.
  commit_sha = `git log -1 --format='%H' --before=#{i}.day`.rstrip

  # Get the .rubocop_todo.yml content at the commit.
  rubocop_todo_content = `git show #{commit_sha}:.rubocop_todo.yml`.rstrip

  # Get the total count of offenses in the .rubocop_todo.yml.
  # The offenses count is described in the form like `# Offense count: 42` per cop.
  offenses_count = rubocop_todo_content.scan(/count: (\d+)/).flatten.map(&:to_i).sum

  # Output date and count in TSV format.
  puts [
    Date.today - i,
    offenses_count
  ].join("\t")
end

Run the above script and you will see the following output:

$ ruby aggregate_rubocop_todo_offenses.rb
2022-07-26      164761
2022-07-25      164763
2022-07-24      164764
2022-07-23      165303
2022-07-22      165303
2022-07-21      165296
2022-07-20      165290
...
2021-11-27      193170

In such cases, it's convenient to paste the data into Google Spreadsheet to generate a chart.

It's a crazy amount, but slowly decreasing in these days. Good...

In fact, I recently created a GitHub Action workflow that automatically corrects offenses and continuously creates new pull requests, so offenses count is gradually decreasing only by pushing merge button, but I'll get to that in another time.

If you are interested, please add your reactions! 🦄 ✨

Custom cop in 30 min

r7kamura — Thu, 21 Jul 2022 01:36:54 +0000

This article is the detailed text version of this video:

Custom cop in 30 min - YouTube

I'll explain how to create a custom Ruby lint rule with RuboCop (a.k.a. "custom cop") from scratch. In this tutorial, I'll write an example cop to sort Hash literal elements by their keys.

Start from template

The cop to be created in this tutorial will be implemented in the form of a RuboCop plugin. Because RuboCop does not yet have a plug-in mechanism, we have to write a lot of additional code to make it work as a plugin.

This will be a bit hard work, so I prepared a template that includes the necessary code for scaffolding that.

https://github.com/r7kamura/rubocop-extension-template

Overview

To add a new cop, you need to do the following steps:

Add test
- spec/rubocop/cop/my_extension/hash_literal_order_spec.rb
Add cop class
- lib/rubocop/cop/my_extension/hash_literal_order.rb
Load cop class
- lib/my_extension.rb
Add default config
- default.yml

RuboCop itself and plugins like rubocop-rspec and rubocop-rails are also implemented in the same way.

Add test

Basically, cop tests are written in RSpec. You don't need to have written RSpec before. Just copy and paste the existing sample code and it will work.

All you need to know is that these 3 methods are officialy provided by RuboCop.

expect_offense(code_with_message)
expect_no_offenses(code)
expect_correction(code)

MyExtension/HashLiteralOrder is the cop name that we are writing.
Every cop has a corresponding class, and they are defined under ::RuboCop::Cop namespace.
This is apparently no exception, even for 3rd party plug-ins.
So the minimum example of our test code will be like this:

# spec/rubocop/cop/my_extension/hash_literal_order_spec.rb
RSpec.describe RuboCop::Cop::MyExtension::HashLiteralOrder, :config do
  it 'autocorrects offense' do
    expect_offense(<<~TEXT)
      { b: 1, c: 1, a: 1 }
      ^^^^^^^^^^^^^^^^^^^^ Sort Hash literal entries by key.
    TEXT

    expect_correction(<<~RUBY)
      { a: 1, b: 1, c: 1 }
    RUBY
  end
end

expect_offense takes as its argument not only the Ruby code, but also a string with the offence message. This is a bit tricky, but it actually useful.

Add cop class

Once you have written the tests, it's time to write the implementation.

I'll write the near-complete implementation of the cop.
I know there are a lot of parts you don't know, but don't panic.

From here on, I'll explain step by step in comments in the code,
not in plain text, so please read along with the code.

# lib/rubocop/cop/my_extension/hash_literal_order.rb
module RuboCop
  module Cop
    module MyExtension
      # By convention, we write fairly detailed documentation for each cop
      # using YARD comments. Even official RuboCop cops do so, and the official
      # documentation site is automatically generated from these comments there.
      # e.g. https://docs.rubocop.org/rubocop/cops_layout.html
      #
      #
      # Sort Hash literal entries by key.
      #
      # @example
      #
      #   # bad
      #   {
      #     b: 1,
      #     a: 1,
      #     c: 1
      #   }
      #
      #   # good
      #   {
      #     a: 1,
      #     b: 1,
      #     c: 1
      #   }
      #
      #
      # As I mentioned previously, if you want to create `MyExtenison/HashLiteralOrder` cop,
      # the class name should be `::RuboCop::Cop::MyExtension::HashLiteralOrder`.
      # All cop classes must inherit from RuboCop::Cop::Base,
      # so here we wrote `< Base` as well.
      class HashLiteralOrder < Base

        # To support `--autocorrect` in this cop,
        # we need to extend this module.
        extend AutoCorrector

        # If you define `MSG` constant in cop class,
        # RuboCop will use it as an offense message for this cop.
        MSG = 'Sort Hash literal entries by key.'

        # RuboCop provides `def_node_matcher` to easily define pattern-matching method,
        # which takes a Symbol method name and a String AST pattern,
        # In this case, it defines `#hash_literal_order` method,
        # which takes an AST node as argument and returns a boolean value.
        #
        # For example, this method returns true for `{ a: 1, b: 2 }`,
        # and returns false for `[1, 2]` and `{ a => b }`.
        #
        # @!method hash_literal?(node)
        # @param [RuboCop::AST::HashNode] node
        # @return [Boolean]
        def_node_matcher :hash_literal?, <<~PATTERN
          (hash
            (pair
              {sym | str}
              _
            )+
          )
        PATTERN

        # This is a callback method that is called when RuboCop detects
        # a Hash node. We use this mechanism to implement the registration
        # and autocorrection of offenses when we find a code pattern that
        # we want to detect.
        #
        # The key method is `add_offense`.
        # By calling this, you can tell RuboCop that you've found an offense.
        #
        # In this case, if the keys of the target Hash node are all Symbols
        # or Strings and not sorted by name, we consider it an offense,
        # then replace the entire Hash node with a new code, which is
        # specified by the Ruby code as a String.
        #
        # @param [RuboCop::AST::HashNode] node
        def on_hash(node)
          return unless hash_literal?(node)

          return if sorted?(node)

          add_offense(node) do |corrector|
            corrector.replace(
              node,
              autocorrect(node)
            )
          end
        end

        private

        # ... some internal implementation ...
        # ... such as `#sorted?(node)`,
        # ... `#autocorrect(node)`, and so on ...
      end
    end
  end
end

The details are not described due to space limitations, so please read the original source code here:

https://github.com/r7kamura/sevencop/blob/main/lib/rubocop/cop/sevencop/hash_literal_order.rb

AST pattern matching

The syntax of this pattern match has a rather strange style and may be difficult to understand at first sight. There is an easy-to-understand explanation at Node Pattern :: RuboCop Docs, so it would be better to write it by hand while looking at this at first.

(hash
  (pair
    {sym | str}
    _
  )+
)

There is a useful CLI tool in the parser gem called ruby-parse, which shows the parsed results as ASTs, and I often check it when writing Cop like this:

$ gem install parser
$ echo '{ a: 1, b: 1 }' > example.rb
$ ruby-parse example.rb
(hash
  (pair
    (sym :a)
    (int 1))
  (pair
    (sym :b)
    (int 1)))

Load cop class

Don't forget to load the cop class file.
Sometimes I forget this and get confused.

# lib/my_extension.rb
require 'rubocop/cop/my_extension/hash_literal_order'

Add default config

Finally, don't forget to add default config for the cop you added.

Each cop can have its own configuration values, and it is common practice for RuboCop plug-ins to include their default settings in default.yml.

# default.yml
MyExtension/HashLiteralOrder:
  Description: |
    Sort Hash literal entries by key.
  Enabled: true
  VersionAdded: '0.1'

Not the cop is complete! This cop works as follows.

$ bundle exec rubocop
Inspecting 1 files
C

Offenses:

example.rb:3:1: C: [Correctable] MyExtension/HashLiteralOrder: Sort Hash literal entries by key.
{ b: 2, a: 1, c: 3 }
^^^^^^^^^^^^^^^^^^^^

1 files inspected, 1 offense detected, 1 offense autocorrectable

The same cop we created here is included in my gem called sevencop. You can try this cop in the following repository.

https://github.com/r7kamura/sevencop-hash-literal-order-example

Wrapping up

I explained how to create a custom cop from scratch in this tutorial.

The finished version of this cop's source is available at GitHub:

https://github.com/r7kamura/sevencop/blob/main/lib/rubocop/cop/sevencop/hash_literal_order.rb

As mentioned at the beginning of this article, I'm also providing a live coding video for this tutorial. If you have any questions, don't hesitate to ask, either in the comments of this article or the video.

Custom cop in 30 min - YouTube

If you want to know more about how to create custom cops, I recommend that you read these pages:

I have posted other tutorials if you would like to see them.

Thank you for reading so far. If you have any questions, please ask anything in the comments.

Good coding!

Chrome extension in 20 min

r7kamura — Tue, 19 Jul 2022 05:42:48 +0000

This article is the detailed text version of the video I recently posted:

Chrome extension in 20 min - YouTube

I'll explain how to create a Chrome extension from scratch that turns a new tab into a notepad.

I use the following tools in this tutorial, but you don't have to have used these tools before.

node.js (14.x or later)
typescript
css
vite
monaco-editor
types/chrome
crxjs/vite-plugin

Create a new vite project

First, create a new vite project by create-vite npm package.

npm init vite@2.9.0

npm init x (or npm create x as an alias) runs npm exec create-x, so in this case you will be running npm exec create-vite. See npm help init for more detials.

As you may have noticed, I specified the version 2.9.0. This is because the current latest vite version 3.0.0 doesn't work well with crxjs/vite-plugin yet, so we need to choose the older version for now.

After running the command, you are ready to build the default HTML + CSS + JavaScript source.

npm install
npm run dev

This command will continuously compile the source files and output files into ./dist/ directory, then start http://localhost:3000 as a preview HTTP server.

Create an empty Chrome extension

To create an empty Chrome extension, you need to write manifest.json.

{
  "name": "newtab-editor",
  "description": "Editor in new tab",
  "manifest_version": 3,
  "version": "0.0.1"
}

However, only putting this file won't cause Vite to include manifest.json to build target.

To achieve this, you also need to write vite.config.ts.
The @crxjs/vite-plugin does all the tedious work, so all you have to do is to pass manifest.json to it.

import { crx } from "@crxjs/vite-plugin";
import manifest from "./src/manifest.json";

export default {
  plugins: [crx({ manifest })],
};

To import crx, don't forget to install it:

npm install --save-dev @crxjs/vite-plugin

After these steps, you can build the extension.
If you are still leaving npm run dev on, you should have a built Chrome extension in the ./dist/ directory.

Install the extension

To install the extension from local files, follow the steps below:

open Google Chrome
go to Chrome extensions page (chrome://extensions/)
enable "Developer mode"
click "Load unpacked extension"
select the ./dist/ directory

Override new tab

To override new tab page by our extension, add chrome_url_overrides property to manifest.json.

"chrome_url_overrides": {
  "newtab": "index.html"
},

After reloading the extension, you should see the index.html in the new tab.

Add monaco-editor

This time I will use an editor called monaco-editor. This is a Visual Studio Code-based editor, which allows you to achieve roughly the same functionality in your browser.

It is easy to use, just import and mount it on some HTML element and it works.

npm install --save monaco-editor

// src/main.ts
import "./style.css";
import * as monaco from "monaco-editor";

const app = document.querySelector<HTMLDivElement>("#app")!;
monaco.editor.create(app, {
  fontSize: 18,
  language: "markdown",
  lineHeight: 1.6,
  minimap: { enabled: false },
  padding: { bottom: 16, top: 16 },
  theme: "vs-dark",
});

After reloading the extension, you should see the editor in the new tab.

Save content via storage API

To save editor content, we can use the storage API.

Unfortunately, however, it is not possible to call these APIs directly from index.html.
Instead, you need to have a background process to which these APIs are allowed and send requests to it.

First, the editor content is changed, send a request to the background process to save the content.

// src/main.ts
editor.onDidChangeModelContent(() => {
  const content = editor.getValue();
  chrome.runtime.sendMessage({ type: "saveContent", content });
});

Second, when you opened the new tab, restore the content you saved.

chrome.runtime.sendMessage({ type: "loadContent" }, ({ content }) => {
  editor.setValue(content);
});

Finally, prepare a backgruond process that accepts requests.

// src/background.ts
chrome.runtime.onMessage.addListener((request, _, sendResponse) => {
  switch (request.type) {
    case "loadContent":
      chrome.storage.sync.get("content", ({ content }) => {
        sendResponse({ content });
      });
      return true;
    case "saveContent":
      chrome.storage.sync.set({ content: request.content });
      break;
  }
  return;
});

It's done!

Wrapping up

In this tutorial, I explained how to create a Chrome extension from scratch that turns a new tab into a notepad.

The finished version of this Chrome extension is available on Chrome Web Store.

Editabro - Chrome Web Store

Of course, the source code is also available on GitHub. If you are interested, I'd recommend you to read the source code. It includes techniques such as debounce to reduce the amount of communication with background processes, removing unnecessary language functions to reduce bundled code size, and using Worker to improve performance.

https://github.com/r7kamura/editabro

I learned how to create Chrome extensions these days from @jacksteamdev's excellent article series. I would like to take this opportunity to thank you.

Create a Vite-React Chrome Extension in 90 seconds - DEV Community

As noted at the beginning of this article, I'm also providing a live coding video version of this tutorial. If you have any questions, don't hesitate to ask, either in the comments of this article or in the comments of the video.

Chrome extension in 20 min - YouTube

I will be posting several other coding videos, so if you are interested, please check out my channel.

https://www.youtube.com/c/r7kamura

Thanks for reading this far. If you have any questions, please ask anything in the comments.

Good coding!

DEV Community: r7kamura

Use ruby-lsp plugins without modifying the project's Gemfile

GitHub CLI on devcontainer

Release notes management

Release notes

Labels

Workflows

Wrapping up

BUNDLE_ONLY is now available

Run YARD as RSpec

Further reading

Automate RuboCop ToDo fix

ToDo list based linting

Automate it

rubocop-todo-corrector

Our story

Wrapping up

Aggregate RuboCop ToDo count

Custom cop in 30 min

Start from template

Overview

Add test

Add cop class

AST pattern matching

Load cop class

Add default config

Wrapping up

Chrome extension in 20 min

Create a new vite project

Create an empty Chrome extension

Install the extension

Override new tab

Add monaco-editor

Save content via storage API

Wrapping up