DEV Community


Posted on • Updated on

I made a plugin to remember todo comments on the code in vite


Often we forget the todo left on the code.
IDE extensions and other features are added, but because of differences in development environments among members and the fact that they are not always visible, they are often noticed just before the release of a product.

We believe that incorporating it as part of the build may prevent it.
Recently, we have been using vite a lot, so we created a plugin that can be used with vite.
see plugin.



npm i -D vite-plugin-hit-word
Enter fullscreen mode Exit fullscreen mode

Add it to vite.config.ts

A deadline can be set on the code by assigning a date. If the deadline is exceeded, it will be output in red on the terminal.

import { defineConfig } from 'vite'
import hitWord from 'vite-plugin-hit-word'

export default defineConfig({
  plugins: [
      include: ['src/*'],
      exclude: ['node_modules'],
      word: { value: '[todo]:', hasDeadlineDate: true },
Enter fullscreen mode Exit fullscreen mode


The following files are available.

import styles from './App.module.css'

function App() {
  // [todo]: [2022/05/22] issue #765

  return (
    <div className="App">
      <header className={styles.header}></header>

export default App
Enter fullscreen mode Exit fullscreen mode

At build time, output to the terminal as follows.
You can jump to the corresponding code from the path.

/Users/XXXXXX/projects/Sample/src/App.tsx(4) :>>   // [todo]: [2022/05/22] issue #765
Enter fullscreen mode Exit fullscreen mode

I have shown an example with todo, but it can be changed to suit your project.

Feedback is welcome.

Top comments (1)

chloe999 profile image
chloe decker

Access the show link play online free klondike solitaire card game when I am free I play it.