https://github.com/thinkmill/markings
đ
https://github.com/thinkmill/markings
Last synced: 10 months ago
JSON representation
đ
- Host: GitHub
- URL: https://github.com/thinkmill/markings
- Owner: Thinkmill
- Created: 2020-03-04T10:43:00.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2023-08-03T06:18:27.000Z (over 2 years ago)
- Last Synced: 2025-04-08T17:54:38.500Z (10 months ago)
- Language: TypeScript
- Homepage:
- Size: 796 KB
- Stars: 12
- Watchers: 16
- Forks: 1
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# đ Markings
Never forget a `// TODO` or `// FIXME` again.
Notes added to your code are surfaced visually when a page is rendered so they're always visible in context of what you're building.
Answer _"What's left?"_ with the project wide burn down list of all notes.
## Getting Started
In its simplest form, the Markings CLI generates a report of all `TODO`, `FIXME` & `QUESTION` comments in your code:
```
yarn add @markings/cli @markings/source-comments @markings/output-html
```
And in your `package.json`*:
```json
{
"scripts": {
"report": "markings"
},
"markings": {
"sources": [{
"source": "@markings/source-comments",
"include": "src/**/*.(j|t)s"
}],
"outputs": [{
"output": "@markings/output-html",
"filename": "report.html"
}]
}
}
```
Finally, run:
```bash
yarn report
```
To generate `report.html`, containing all the detected `TODO`, `FIXME` & `QUESTION` comments in your code.
### React
When used within a React codebase, the special `` component allows viewing a report directly in the page.
```
yarn add @markings/react @markings/source-react
```
Wrap your application in ``
```javascript
import { MarkingProvider } from "@markings/react";
const App = () => (
...
);
```
Then add `` components around the components you want to mark
```javascript
import { Marking } from "@markings/react";
const MyComponent = () => (
Hello world
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
);
```
Now your page will have an inline report of all the detected ``.
> âšī¸ The inline report will _not_ include any `TODO` / `FIXME` / `QUESTION` comments.
To include React `` along side comments in your report output, add `@markings/source-react` to your `package.json`:
```json
{
"markings": {
"sources": [{
"source": "@markings/source-comments",
"include": "src/**/*.(j|t)s"
}, {
"source": "@markings/source-react",
"include": "src/**/*.(j|t)s"
}]
}
}
```
## Outputs
Outputs work with the Markings CLI to generate reports of all discovered markings.
First, install the cli:
```
yarn add @markings/cli
```
And in your `package.json`*:
```json
{
"scripts": {
"report": "markings"
},
}
```
Then, pick one or more outputs. For every output added, a report will be generated.
### HTML
Generate a good looking html report.
```
yarn add @markings/output-html
```
And in your `package.json`*:
```json
{
"markings": {
"outputs": [{
"output": "@markings/output-html",
"filename": "report.html"
}]
}
}
```
### JSON
Generate a detailed JSON report.
```
yarn add @markings/output-json
```
And in your `package.json`*:
```json
{
"markings": {
"outputs": [{
"output": "@markings/output-json",
"filename": "report.json"
}]
}
}
```
### CSV
Generate a detailed CSV report.
```
yarn add @markings/output-csv
```
And in your `package.json`*:
```json
{
"markings": {
"outputs": [{
"output": "@markings/output-csv",
"filename": "report.csv"
}]
}
}
```
---
_* In a monorepo? Place this in your root `package.json`._