Here is my eslintrc.json
{
"env": {
"browser": true,
"es2021": true
},
"extends": [
"eslint:recommended",
"plugin:vue/vue3-essential"
],
"parserOptions": {
"ecmaVersion": "latest"
},
"plugins": [
"vue",
"eslint-plugin-vue"
],
"rules": {
"vue/no-async-in-computed-properties": "error",
"vue/no-unused-vars": "error"
}
}
And This is my vue component(mycomponent.js).
I am using vue CDN to define the vue component.
const myComponent = Vue.defineComponent({
template: '#myTemplate',
components: {
'other-component': otherComponent,
},
props: {...}
watch: {...}
data() {return {...}}
methods: {
fn1() {
let a;
}
}
});
As you can see, The vue component has an unused variable in the fn1 function.
But it doesn't give any error.
Please review if there is any issues in the eslint configuration.
I already installed the eslint-plugin-vue package.
Related
I have a Svelte app with Vite bundler. My linter is Eslint with Prettier and vite-plugin-svelte plugins. Linting works well, but I want to make the app show all the linting errors inside Vite hmr overlay, same way it works with syntax errors as in this picture
My question is: Is it even possible to make something like that with Vite? I found nothing helpful about Vite's hmr overlay in the documentation, or maybe I just missing something in Eslint/Prettier config?
Here is config files:
.eslintrc :
{
"extends": ["eslint:recommended", "airbnb-base", "prettier"],
"plugins": ["svelte3", "prettier"],
"env": {
"es6": true,
"browser": true,
"node": true
},
"overrides": [
{
"files": ["*.svelte"],
"processor": "svelte3/svelte3"
}
],
"parserOptions": {
"project": "./jsconfig.json"
},
"rules": {
"prefer-arrow-callback": "off",
"arrow-body-style": "off",
"import/prefer-default-export": "off",
"import/no-anonymous-default-export": [
"error",
{
"allowArray": true,
"allowArrowFunction": false,
"allowAnonymousClass": false,
"allowAnonymousFunction": false,
"allowCallExpression": true,
"allowLiteral": false,
"allowObject": true
}
],
"dot-notation": "off"
}
}
.prettierrc.js
module.exports = {
arrowParens: 'always',
bracketSpacing: true,
endOfLine: 'lf',
printWidth: 80,
singleQuote: true,
tabWidth: 2,
trailingComma: 'all',
overrides: [
{
files: 'package*.json',
options: {
printWidth: 1000,
},
},
],
};
vite.config.js
export default defineConfig({
plugins: [
svelte({
preprocess: preprocess(),
}),
],
});
If it's possible to write your own vite plugin or modify the one in question, adding throw new Error(YOUR_ERROR) in the right plugin hook will trigger the overlay. e.g: modifying this example
https://vitejs.dev/guide/api-plugin.html#transformindexhtml
const htmlPlugin = () => {
return {
name: 'html-transform',
transformIndexHtml(html) {
// ADD THROW LINE
throw new Error("this will showup in an overlay")
}
}
}
Will lead to...
I try to import interfaces like this
import placeholder from '#/assets/images/placeholder-image.svg'
import { Button } from '#/components/atoms/buttons/Button'
but they get es-lint complain Like this.
and
Missing file extension for "#/components/atoms/buttons/Button"eslintimport/extensions
Unable to resolve path to module '#/components/atoms/buttons/Button'.eslintimport/no-unresolved
My .babelrc file is
"presets": ["#babel/react", "#babel/preset-typescript"],
"plugins": [
"#babel/plugin-transform-typescript",
"babel-plugin-typescript-to-proptypes",
"#babel/plugin-proposal-export-default-from",
["#babel/plugin-proposal-class-properties", { "loose": true }],
"#babel/plugin-proposal-object-rest-spread",
["#babel/plugin-proposal-private-methods", { "loose": true }],
["#babel/plugin-proposal-private-property-in-object", { "loose": true }],
[
"module-resolver",
{
// https://stackoverflow.com/a/57288642/2298548
"root": ["."],
"alias": {
"#/svg": "./src/svg",
"#/utils": "./src/utils",
"#/hooks": "./src/hooks",
"#/doc": "./src/doc",
"#/config": "./config",
"#/styles": "./src/styles",
"#/fonts": "./src/assets/fonts",
"#/components": "./src/components",
"#/SVGIcons": "./src/SVGIcons",
"#/base": "./src",
"#/assets": "./src/assets"
}
}
]
]
}
and my .eslintrc.js is
settings: {
'import/resolver': {
node: {
extensions: ['.js', '.jsx', '.ts', '.tsx', '.svg'],
},
},
},
Does anyone have an idea for this why happen?
In path alias how we have to find a solution for linter error without disable es-lint.
Try declaring a type and then import it, check this link.
declare module '*.svg' {
import * as React from 'react';
export const ReactComponent: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
const src: string;
export default src;
}
If the above commented solution doesn't work you might need to disable it temporary:
rules: {
'import/no-unresolved': [
'error',
{
'ignore': [ '\.svg' ]
}
]
}
When running
npm run electron:serve
I get this error:
in ./node_modules/msnodesqlv8/build/Release/sqlserverv8.node
Module parse failed: Unexpected character '�' (1:2)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
I think I understand the error. My webpack doesn't know how to handle the .node file in this dependency ("msnodesqlv8": "^2.2.0")
I have tried adding node-loader but I've not had any success with it. I have tried configuring it in my vue.config.js like this:
module.exports = {
transpileDependencies: [
'vuetify'
],
configureWebpack: {
devtool: 'source-map'
},
pluginOptions: {
electronBuilder: {
preload: 'preload/preload.js',
"directories": {
"buildResources": "build"
},
mainProcessWatch:['src/services/background/**'],
"files": [
"build/**/*",
"!node_modules"
],
"win": {
"asar": false,
"target": "nsis",
"icon": "build/icon.ico"
},
"nsis": {
"installerIcon": "build/icon.ico",
"installerHeaderIcon": "build/icon.ico",
"deleteAppDataOnUninstall": true
}
}
},
chainWebpack: config => {
config
.plugin('html')
.tap(args => {
args[0].title = "Configuration Utility";
return args;
});
config.module
.rule('node')
.test(/\.node$/)
.use('node-loader')
.loader('node-loader')
.end();
config.module
.rule('pug')
.test(/\.pug$/)
.use('pug-plain-loader')
.loader('pug-plain-loader')
.end();
}
}
I also tried adding a separate webpack.config.js with no success:
module.exports = {
target: "node",
node: {
__dirname: false,
},
module: {
rules: [
{
test: /\.node$/,
loader: "node-loader",
},
],
},
};
How can I get this working?
You need to move the node loader into the chainWebpack of the electron builder for this to work.
module.exports = {
transpileDependencies: [
'vuetify'
],
configureWebpack: {
devtool: 'source-map'
},
pluginOptions: {
electronBuilder: {
preload: 'preload/preload.js',
"directories": {
"buildResources": "build"
},
// THESE NEXT 3 LINES HERE:
chainWebpackMainProcess: config => {
config.module.rule('node').test(/\.node$/).use('node-loader').loader('node-loader').end()
},
mainProcessWatch:['src/services/background/**'],
"files": [
"build/**/*",
"!node_modules"
],
"win": {
"asar": false,
"target": "nsis",
"icon": "build/icon.ico"
},
"nsis": {
"installerIcon": "build/icon.ico",
"installerHeaderIcon": "build/icon.ico",
"deleteAppDataOnUninstall": true
}
}
},
chainWebpack: config => {
config
.plugin('html')
.tap(args => {
args[0].title = "Configuration Utility";
return args;
});
config.module
.rule('pug')
.test(/\.pug$/)
.use('pug-plain-loader')
.loader('pug-plain-loader')
.end();
}
}
I'm trying to load a 3d scene in react with babylonjs. And this works excellently in my React app but I am getting failed tests from tests that have previously been passing with the following errors. I have tried exempting babylon from transformations but I am still failing.
● Test suite failed to run
Jest encountered an unexpected token
SyntaxError: Unexpected token export
at compileFunction (<anonymous>)
4 | import styled, { withTheme } from 'styled-components'
5 | import { observer, inject } from 'mobx-react'
> 6 | import * as BABYLON from '#babylonjs/core'
| ^
7 | import { GLTFFileLoader } from '#babylonjs/loaders/glTF/glTFFileLoader'
8 | import '#babylonjs/loaders/glTF'
9 | import '#babylonjs/materials/custom'
Here is my webpack configuration file
const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'index_bundle.js',
},
module: {
rules: [
{
test: /\.(js)$/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader',
options: {
rootMode: 'upward',
presets: [
'#babel/preset-env',
'#babel/react',
{
plugins: [
'#babel/plugin-proposal-class-properties',
],
},
],
},
},
],
},
{
test: /\.css$/,
exclude: /node_modules/,
use: [
{
loader: 'style-loader',
},
{
loader: 'css-loader',
},
],
},
],
},
mode: 'development',
devtool: 'inline-source-map',
plugins: [
new webpack.HotModuleReplacementPlugin(),
new HtmlWebpackPlugin({
template: './src/index.html',
}),
],
devServer: {
contentBase: path.join(__dirname, 'public'),
hot: true,
port: 3000,
open: true,
historyApiFallback: true,
},
}
Here is my babel configuration.
{
"presets": ["#babel/preset-env", "#babel/preset-react"],
"plugins": [
["#babel/plugin-proposal-decorators", { "legacy": true }],
["#babel/plugin-proposal-class-properties", { "loose": true }],
"#babel/plugin-proposal-optional-chaining",
"#babel/plugin-transform-runtime",
[
"styled-components",
{ "ssr": false, "displayName": true, "preprocess": false }
]
],
"env": {
"production": {
"plugins": [
["react-remove-properties", { "properties": ["data-testid"] }]
]
},
"test": {
"presets": ["#babel/preset-env", "#babel/preset-react"],
"plugins": [
"#babel/plugin-proposal-class-properties",
"#babel/plugin-transform-modules-commonjs"
]
}
}
}
Here is my jest configuration
{
"setupFilesAfterEnv": ["jest-expect-message"],
"transformIgnorePatterns": ["/node_modules/(?!#babylonjs)"],
"transform": {
"^.+\\.js$": "babel-jest",
"^.+\\.ts$": "ts-jest"
},
"globals": {
"NODE_ENV": "test"
}
}
I found since I was in a mono-repo structure, I had to change from .babelrc to babel.config.js as recommended in jest docs. This solved the issue of transforming the esNext syntax in the #babylonjs modules
For those who aren't using babel this can be achieved with vanilla ts-jest. Be warned, this can add up to a minute to the initial load time for your tests because jest has to transform the babylonjs library.
const config = {
...
//SLOW - transform javascript
preset: 'ts-jest/presets/js-with-ts-esm',
//SLOW - transform node modules
transformIgnorePatterns: []
}
``
I am trying to use ESLint for mocha, but for some reason the rules don'y apply and the linting passes.
My config file:
module.exports = {
"env": {
"browser": true,
"es6": true,
"node": true,
},
"extends": "eslint:recommended",
"globals": {
"Atomics": "readonly",
"SharedArrayBuffer": "readonly",
"expect": "true"
},
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 2018,
"sourceType": "module"
},
overrides: [
{
files: [
"**/*.test.js"
],
env: {
mocha: true
},
plugins: ["mocha"],
rules: {
"mocha/no-exclusive-tests": "error",
"mocha/no-pending-tests": "error"
}
}
]
};
My test file only includes one line:
it('should throw a lint error')
The linter should find an error because of the 'no pending tests' rule, yet when I run the test file with eslint the linting passes as a success.
I have no idea why. I looked it up online and it seems like my configuration file is good as it is.
your solution is the same as this post answer.
However, the one that suits you better is the one you only edit the .eslintrc file as shown in eslint-configuration-doc, which would go like this:
module.exports = {
env: {
browser: false,
es6: true,
node: true,
mocha: true
}
// More code to go on that is not relative to your question ...
}
The line you are aiming is the one with
mocha: true
This solution worked for me.
{
"env": {
"browser": true,
"es6": true,
"mocha": true // add mocha as true to your ".eslintrc. *" file
}
}