I've added razzle-eslint-plugin and have included it in my razzle.config.js like
plugins: ['scss', 'eslint']
The issue is that the console doesn't display any lint warnings for typescript files. If I manually run eslint from console I could see the lint errors, but not while running razzle start
On checking razzle-eslint-plugin
source I could see that the rules mention only js & jsx files to be checked as shown below
config.module.rules = [
{
test: /\.(js|jsx|mjs)$/,
enforce: 'pre',
loader: require.resolve('eslint-loader'),
options: mainEslintOptions,
exclude: /node_modules/,
},
...config.module.rules,
]
If I add ts|tsx
to the above config, I could promptly see the warnings. But it requires manually editing the file unde node_modules
which I would like to avoid. Is there a way I could extend the config from razzle.config.js? I tried pushing a new rule through module.rules.push
but results in an error These relative modules were not found:
If this needs to be added to razzle-eslint-plugin
I could raise a PR. Please suggest
I have set in my razzle.config.js
file the following settings:
'use strict'
module.exports = {
plugins: [
{
name: 'typescript',
options: {
useBabel: true,
useEslint: true,
forkTsChecker: {
tsconfig: './tsconfig.json',
tslint: undefined,
watch: './src',
typeCheck: true
}
}
}
]
}
and then .eslintrc.json
as follows
{
"extends": [
"eslint:recommended",
"prettier",
"plugin:jsx-a11y/recommended",
"plugin:@typescript-eslint/recommended",
"plugin:react/recommended"
],
"plugins": ["@typescript-eslint"],
"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaVersion": 6,
"sourceType": "module",
"ecmaFeatures": {
"modules": true,
"jsx": true
}
},
"env": {
"browser": true,
"node": true,
"jest": true
},
"settings": {
"react": {
"version": "detect"
},
"import/resolver": {
"node": {
"extensions": [".js", ".jsx", ".ts", ".tsx"]
}
}
}
}
and then in my package.json
the following row to perform linting:
"lint": "eslint --ext 'js,jsx,ts,tsx' .",
@andersnylund Thanks for your input. With the above configuration, I'm able to see typescript errors in the console. But still no eslint warnings. I could see many lint warnings by running npm run lint
. It would be a much better experience if I could see the warnings right there in the console like we have in cra projects
This is my current config.
const path = require('path')
module.exports = {
plugins: ['scss', 'eslint'],
modify(defaultConfig, { target, dev }, webpack) {
const config = defaultConfig
config.resolve.extensions.push('.ts', '.tsx')
config.module.rules.push({
test: /\.(ts|js)x?$/,
exclude: /node_modules/,
loader: 'babel-loader',
})
if (target === 'node' && !dev) {
config.entry = path.resolve(__dirname, './src/server.tsx')
config.output.filename = 'server.bundle.js'
config.output.path = path.resolve(__dirname, './build')
config.output.libraryTarget = 'commonjs2'
}
return config
}
}
Tslint is being deprecated for ESLint sometime in 2019, and it's kind of mid November, so razzle should probably create a plan to switch to ESLint.
Finally, I managed to get both Typescript errors & ESLint warnings on the console using the below config.
const ForkTSCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin')
const path = require('path')
module.exports = {
modify(defaultConfig, { target, dev }, webpack) {
const config = defaultConfig
config.resolve.extensions.push('.ts', '.tsx')
config.plugins.push(
new ForkTSCheckerWebpackPlugin({
checkSyntacticErrors: true,
eslint: true,
}))
config.module.rules.push({
test: /\.(ts|js)x?$/,
include: [path.resolve(__dirname, 'src')],
loader: 'babel-loader',
})
}
}
And I have my .eslintrc
file at project root with typescript parser
@fifn2 @aswin-s The problem is that Fork TS Checker Webpack Plugin used by the razzle-plugin-typescript is old (v0.4.1) and doesn't support eslint. I've created a PR to update the plugin in #1174
Is this PR ready to use?
@imagine10255 this is not a PR, but we have plans for this
we will release new version of razzle-plugin-eslint
with support of typescript in a couple of weeks
@nimaa77 Thanks, I am currently integrating typescript, is there any way to use it first?
@nimaa77 any update? or any way to help?
This is possible. We have github discussions enabled now. Please move this there :) Also new typescript plugin will use eslint.
Most helpful comment
Tslint is being deprecated for ESLint sometime in 2019, and it's kind of mid November, so razzle should probably create a plan to switch to ESLint.