I'm using the underscore library.
I get this when running jshint:
[L38:C38] W117: '_' is not defined.
var approvedAndRequstedCount = _.countBy(products, function(obj) {
Warning: Task "jshint:all" failed. Use --force to continue.
This is my config file:
{
"node": true,
"browser": true,
"esnext": true,
"bitwise": true,
"camelcase": false,
"curly": true,
"eqeqeq": true,
"immed": true,
"indent": 2,
"latedef": true,
"newcap": true,
"noarg": true,
"quotmark": "single",
"regexp": true,
"undef": true,
"unused": true,
"strict": true,
"trailing": true,
"smarttabs": true,
"globals": {
"angular": false
}
}
I guess it's something with the globals option? I tried to add "_": false but no luck. Any ideas?
I had this issue as well.
I installed underscore: bower install -save underscore and it worked fine in the code. Unfortunately jshint was not finding that reference. You must tell jshint about your global variables in configuration file like .jshintrc:
{
…
"globals": {
"angular": false,
"_": false
}
}
If you continue to have this issue you need to make sure that underscore is included when jshint is executed. I would not recommend setting -W117 to true. Squelching those errors might lead to more bugs.
Related
I used a few web components in my Svelte project, but after running npm run dev (which is vite dev actually), error HTMLElement is not defined shows up.
The whole error message is
HTMLElement is not defined
ReferenceError: HTMLElement is not defined
at /src/components/shared/formkit/classes/composite.js:21:39
at async instantiateModule (file:///D:/my_project/node_modules/vite/dist/node/chunks/dep-0fc8e132.js:50548:9)
The problematic line of code is
// File name is composite.js
export class FormKitComposite extends HTMLElement {
But it works fine in Storybook. No error shows up there.
Could anyone teach me how to solve it please?
Thanks in advance!
tsconfig.json:
{
"extends": "./.svelte-kit/tsconfig.json",
"compilerOptions": {
"allowJs": true,
"checkJs": true,
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"noImplicitAny": true,
"noUnusedLocals": true,
"resolveJsonModule": true,
"skipLibCheck": true,
"sourceMap": true,
"strict": true,
"types": [
"#testing-library/jest-dom",
"vitest/globals"
]
},
"include": [
"decs.d.ts"
]
}
vite.config.ts:
const config: UserConfig = {
plugins: [sveltekit()],
resolve: {
alias: {
$components: path.resolve('src/components'),
$functions: path.resolve('src/functions'),
$graphql: path.resolve('src/graphql'),
$stores: path.resolve('src/stores'),
$styles: path.resolve('src/styles'),
$types: path.resolve('src/types')
}
},
server: {
fs: {
strict: false
}
},
test: {
environment: 'jsdom',
globals: true,
include: ['src/components/**/*.test.ts', 'src/functions/**/*.test.ts'],
setupFiles: ['./setup-test.ts'],
coverage: {
branches: 100,
functions: 100,
lines: 100,
statements: 100
}
}
};
It is because web components cannot be rendered in server side.
To solve it, use dynamic import like
onMount(async () => {
await import('your file URL');
});
I was playing around with my extensions and settings a while ago and have been struggling to get my linter to show the old warnings and errors it had. At the moment, I'm not getting any highlighting for undeclared variables. Would anyone mind talking me through how to figure this out, as I've hit a wall.
I have the eslint extension installed. I've also installed eslint with npm install... and have a .eslintrc.json file with the following settings:
{
"env": {
"browser": true,
"es2021": true
},
"extends": ["plugin:react/recommended","eslint:recommended"],
"parserOptions": {
"ecmaFeatures": {
"jsx": true,
"modules": true
},
"ecmaVersion": 11,
"sourceType": "module",
"allowImportExportEverywhere": true
},
"plugins": ["react"],
"rules": {
"react/prop-types": 1,
"react/no-unescaped-entities": 0
},
"settings": {
"react": {
"version": "detect"
}
}}
I have a settings.json file with the following:
{...
"[javascript]": {
"editor.defaultFormatter": "vscode.typescript-language-features"
},
"[javascriptreact]": {
"editor.defaultFormatter": "vscode.typescript-language-features"
},
"diffEditor.renderSideBySide": false,
"prettier.printWidth": 130,
"prettier.useTabs": true,
"prettier.tabWidth": 4,
"[jsonc]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"files.associations": {
"*.js": "javascriptreact"
}
...}
I'm using NestJs with Typescript / TSLint and VueJs with Javascript / ESLint. My VSCode extensions are ESLint, TSLint, Prettier and Vetur. When developing the backend everything is fine, the code gets formatted well. When developing with Vue, I use the airbnb linter config and I'm having problems with it.
Let's say I have this vue instance
<script>
export default {
components: {},
data() {
return {
foo: '',
};
},
};
</script>
and I save the file, the formatter updates the code to
<script>
export default {
components: {},
data() {
return {
foo: ""
};
}
};
</script>
I can't run the code because the linter throws errors based on the airbnb linter config. Although it shouldn't fix the code because I've already used the airbnb style guide.
I use settings sync so I could share my whole VSCode settings for reproduction. These are my settings
{
"vetur.validation.template": true,
"eslint.autoFixOnSave": true,
// ...
"javascript.updateImportsOnFileMove.enabled": "always",
// ...
"typescript.updateImportsOnFileMove.enabled": "always",
"prettier.singleQuote": true,
"prettier.trailingComma": "es5",
"prettier.useTabs": true,
"editor.formatOnSave": true,
// ...
"vetur.format.defaultFormatter.html": "prettier"
}
You can see the whole gist here
https://gist.github.com/matthiashermsen/9620a315960fa7b9e31bf6cda8583e84
So is Prettier struggling with TSLint and ESLint? I would like to have a standard setup for Typescript and Javascript projects.
I also tried to create a new Vue project using prettier as a linter and there everything worked fine. So it seems it's just struggling with the airbnb linter config.
Any ideas? Thanks for help!
According to this post TSLint Deprecated in 2019. You must use ESLint for typescript.
I share my config and you can use that or edit some part of it.
tsconfig.json:
{
"compilerOptions": {
// Target latest version of ECMAScript.
"target": "esnext",
// path to output directory
"outDir": "./dist",
// enable strict null checks as a best practice
"strictNullChecks": true,
// Search under node_modules for non-relative imports.
"moduleResolution": "node",
// Process & infer types from .js files.
"allowJs": true,
// Don't emit; allow Babel to transform files.
"noEmit": true,
// Enable strictest settings like strictNullChecks & noImplicitAny.
"strict": true,
// Import non-ES modules as default imports.
"esModuleInterop": true,
// use typescript to transpile jsx to js
"baseUrl": "./src",
"module": "esnext",
"removeComments": true,
"alwaysStrict": true,
"allowUnreachableCode": false,
"noImplicitAny": true,
"noImplicitThis": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,
"forceConsistentCasingInFileNames": true,
"importHelpers": true,
"typeRoots": [
"src/#types",
"node_modules/#types"
]
}
}
.eslintrc.js
module.exports = {
parser: '#typescript-eslint/parser',
plugins: ['#typescript-eslint'],
extends: [
"eslint:recommended",
"plugin:#typescript-eslint/eslint-recommended",
"plugin:#typescript-eslint/recommended",
"plugin:react/recommended",
"plugin:prettier/recommended",
"prettier/#typescript-eslint",
],
env: {
"browser": true,
"es6": true,
"node": true
},
overrides: [
{
"files": ["*.tsx"],
"rules": {
"react/prop-types": "off"
}
},
{
"files": ["*.js"],
"rules": {
"#typescript-eslint/no-var-requires": "off"
}
}
]
}
.prettierrc.js
module.exports = {
semi: true,
trailingComma: 'all',
singleQuote: true,
printWidth: 120,
tabWidth: 2,
};
I've got two variables in my webpack config which are required but are throwing linting errors.
Is there a way add exceptions for a specific variable?
I want to ignore path and persistentPlugins
current .eslintrc file looks as follows:
{
"parser": "babel-eslint",
"env": {
"es6": true,
"browser": true,
"node": true
},
"globals": {
"React": false,
"react": false,
},
"plugins": [
"react"
],
"extends": [
"eslint:recommended",
"plugin:react/recommended"
],
"rules": {
"no-console": 0,
"no-underscore-dangle": 1,
"quotes": [2, "single"],
"react/no-danger": "off",
}
}
Assuming that it's the no-undef rule that's raising the error, specify them as globals:
...
"globals": {
"path": true,
"persistentPlugins": true,
"React": false,
"react": false,
},
...
Alternatively, you could disable the error inline in the webpack config:
/*global path, persistentPlugins*/
For other errors, there is a question here on disabling them inline.
I'm trying to create a build config file for r.js with uglify2 as optimizer.
I want to disable the drop_debugger so the debugger statement does not get removed.
Below is my build.js file, the build process works fine but the debugger statements have been removed.
Is maybe r.js removing these, what am i doing wrong ?
({
appDir: ".",
baseUrl: ".",
dir: "../app-build",
paths: {
'css-builder': 'lib/require/css-builder'
},
optimize: "uglify2",
uglify2: {
"screw-ie8": true,
compress: {
sequences: true,
dead_code: true,
drop_debugger: false,
}
},
mainConfigFile: "main.js",
modules: [
{
name: "main",
include: "signalR"
}
]
})
Remove the trailing comma from:
drop_debugger: false