/sample-react-markdown

sample to create a Markdown editor with React

Primary LanguageTypeScript


React Markdown Sample


What is this

  • This is a sample to create a Markdown editor with React
  • Minimal implementation
  • Link

Tech Stack

Language

Node.js TypeScript

Package Manager

Yarn

Library

React react-markdown

Build Tool

Vite

Linter / Formatter

ESLint Prettier

Project setup

  1. Clone repository
$ git clone https://github.com/kitamuraDev/vite-react-ts-starter.git
  1. Move to repository
$ cd vite-react-ts-starter
  1. Rewrite git information
$ rm -rf .git
$ git init
$ git add .
$ git commit -m "Initial commit"
$ git remote add origin https://github.com/user/repo.git
$ git push -u origin main
  1. Install dependencies
$ yarn

or

$ yarn install
  1. Launch application
$ yarn dev
  1. Build application
$ yarn build
  1. Preview build results
$ yarn preview

About Git-Hooks

Basically, when you do yarn install, yarn prepare is also executed, but if it is not executed, please execute it explicitly.
$ yarn prepare
If successful, the following settings will be written to .git/hooks/pre-commit.
#!/bin/sh
npx lint-staged

Editor Config

  • Don't forget to install the VScode extension
  • The location of the configuration file is Users> Username> Library> Application Support> Code> User> settings.json

Run ESLint on save

{
  "eslint.packageManager": "yarn",
  "editor.formatOnSave": false, // To avoid conflict with Prettier
  "editor.codeActionsOnSave": ["source.addMissingImports", "source.fixAll.eslint"]
}

Run Prettier on save

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[javascript]": {
    "editor.formatOnSave": true
  },
  "[javascriptreact]": {
    "editor.formatOnSave": true
  },
  "[typescript]": {
    "editor.formatOnSave": true
  },
  "[typescriptreact]": {
    "editor.formatOnSave": true
  },
  "[json]": {
    "editor.formatOnSave": true
  }
}

Contact

Twitter: @kitamuraDev

License

MIT