react-codemirror icon indicating copy to clipboard operation
react-codemirror copied to clipboard

How to lint code

Open Jenny-pyl opened this issue 2 years ago • 4 comments

I use 'uiwjs/react-codemmmirror' to write a 'json-editor' component, but I have no idea about how to lint code.Thanks

Jenny-pyl avatar Mar 09 '23 02:03 Jenny-pyl

@Jenny-pyl https://codemirror.net/examples/lint/

jaywcjlove avatar Mar 09 '23 03:03 jaywcjlove

@Jenny-pyl Here's how to add linting to react-codemirror

import CodeMirror from "@uiw/react-codemirror";
import { json, jsonParseLinter } from "@codemirror/lang-json";
import { linter } from "@codemirror/lint";
import { useState } from "react";

export function JsonEditor() {
  const [value, setValue] = useState("");
  return (
    <div>
      <CodeMirror
        value={value}
        onChange={(value) => setValue(value)}
        height="200px"
        extensions={[json(), linter(jsonParseLinter())]}
      />
    </div>
  );
}

edymusajev avatar Aug 08 '23 08:08 edymusajev

Can this be added to the documentatoin or readme? Consider also the very important but almost hiddenly documented lintGutter.

fabpico avatar Feb 15 '24 09:02 fabpico

Can this be added to the documentatoin or readme? Consider also the very important but almost hiddenly documented lintGutter.

@fabpico Welcome to update the documentation

jaywcjlove avatar Feb 17 '24 03:02 jaywcjlove