Browse Source
* added sandpack linter and installed latest sandpacl * integrate eslint into Sandpack * Format the linting errors, disable preview on lint error, have only two react hooks * fixes build * split eslint-integration * fix tooltip text color, error rename to 'Lint Error', show single lint error * NIT * Just enable it * Delete eslint.md Co-authored-by: Strek <ssharishkumar@gmail.com> Co-authored-by: dan <dan.abramov@gmail.com>main
Danilo Woznica
2 years ago
committed by
GitHub
GitHub
8 changed files with 181 additions and 48 deletions
@ -0,0 +1,85 @@ |
|||
// @ts-nocheck
|
|||
|
|||
import {Linter} from 'eslint/lib/linter/linter'; |
|||
|
|||
import type {Diagnostic} from '@codemirror/lint'; |
|||
import type {Text} from '@codemirror/text'; |
|||
|
|||
const getCodeMirrorPosition = ( |
|||
doc: Text, |
|||
{line, column}: {line: number; column?: number} |
|||
): number => { |
|||
return doc.line(line).from + (column ?? 0) - 1; |
|||
}; |
|||
|
|||
const linter = new Linter(); |
|||
|
|||
// HACK! Eslint requires 'esquery' using `require`, but there's no commonjs interop.
|
|||
// because of this it tries to run `esquery.parse()`, while there's only `esquery.default.parse()`.
|
|||
// This hack places the functions in the right place.
|
|||
const esquery = require('esquery'); |
|||
esquery.parse = esquery.default?.parse; |
|||
esquery.matches = esquery.default?.matches; |
|||
|
|||
const reactRules = require('eslint-plugin-react-hooks').rules; |
|||
linter.defineRules({ |
|||
'react-hooks/rules-of-hooks': reactRules['rules-of-hooks'], |
|||
'react-hooks/exhaustive-deps': reactRules['exhaustive-deps'], |
|||
}); |
|||
|
|||
const options = { |
|||
parserOptions: { |
|||
ecmaVersion: 12, |
|||
sourceType: 'module', |
|||
ecmaFeatures: {jsx: true}, |
|||
}, |
|||
rules: { |
|||
'react-hooks/rules-of-hooks': 'error', |
|||
'react-hooks/exhaustive-deps': 'warn', |
|||
}, |
|||
}; |
|||
|
|||
export const lintDiagnostic = ( |
|||
doc: Text |
|||
): {errors: any[]; codeMirrorPayload: Diagnostic[]} => { |
|||
const codeString = doc.toString(); |
|||
const errors = linter.verify(codeString, options) as any[]; |
|||
|
|||
const severity = { |
|||
1: 'warning', |
|||
2: 'error', |
|||
}; |
|||
|
|||
const codeMirrorPayload = errors |
|||
.map((error) => { |
|||
if (!error) return undefined; |
|||
|
|||
const from = getCodeMirrorPosition(doc, { |
|||
line: error.line, |
|||
column: error.column, |
|||
}); |
|||
|
|||
const to = getCodeMirrorPosition(doc, { |
|||
line: error.endLine ?? error.line, |
|||
column: error.endColumn ?? error.column, |
|||
}); |
|||
|
|||
return { |
|||
from, |
|||
to, |
|||
severity: severity[error.severity], |
|||
message: error.message, |
|||
}; |
|||
}) |
|||
.filter(Boolean) as Diagnostic[]; |
|||
|
|||
return { |
|||
codeMirrorPayload, |
|||
errors: errors.map((item) => { |
|||
return { |
|||
...item, |
|||
severity: severity[item.severity], |
|||
}; |
|||
}), |
|||
}; |
|||
}; |
|||
Loading…
Reference in new issue