Related
I am using eslint extension in vscode and it is always showing me the parser error which says that it cannot read tsconfig.json but when I run in the bash the command "eslint --ext .ts ." then it does not show there is any problem but only in the vscode eslint extension it's showing that problem.
Also, I noticed that it is not complaining about missing semicolons.
tsconfig.json
{
"compilerOptions": {
"target": "ES6",
"module": "commonjs",
"resolveJsonModule": true,
"outDir": "./build/",
"esModuleInterop": true,
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,
"skipLibCheck": true
}
}
.eslintrc
{
"extends": [
"eslint:recommended",
"plugin:#typescript-eslint/recommended",
"plugin:#typescript-eslint/recommended-requiring-type-checking"
],
"plugins": [
"#typescript-eslint"
],
"env": {
"browser": true,
"es6": true,
"node": true
},
"rules": {
"#typescript-eslint/semi": [
"error"
],
"#typescript-eslint/explicit-function-return-type": "off",
"#typescript-eslint/explicit-module-boundary-types": "off",
"#typescript-eslint/restrict-template-expressions": "off",
"#typescript-eslint/restrict-plus-operands": "off",
"#typescript-eslint/no-unsafe-member-access": "off",
"#typescript-eslint/no-unused-vars": [
"error",
{
"argsIgnorePattern": "^_"
}
],
"no-case-declarations": "off"
},
"parser": "#typescript-eslint/parser",
"parserOptions": {
"project": "./tsconfig.json"
}
}
I have a React project, and am having an issue with saving automatically in VSCode.
It works for Typescript files, but I am getting the following error:
"Extension 'Eslint' is configured as formatter but it cannot format 'Javascript'-files
I have looked at some other posts and tried configuring the settings.json explicitly for Javascript files as well, but that did not work.
My settings.json is as follows:
{
"workbench.colorTheme": "Webstorm IntelliJ Darcula Theme",
"editor.formatOnSave": true,
"editor.defaultFormatter": "dbaeumer.vscode-eslint",
"eslint.format.enable": true,
"diffEditor.ignoreTrimWhitespace": false,
"typescript.updateImportsOnFileMove.enabled": "always",
// enable for eslint-plugin json-format
"eslint.validate": [
"json"
],
"window.zoomLevel": 1,
"i18n-ally.localesPaths": [
"src/translations"
],
"i18n-ally.keystyle": "nested",
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
}
My eslintrc.json is as follows:
{
"parser": "#typescript-eslint/parser",
"extends": ["eslint:recommended", "next/core-web-vitals", "plugin:#typescript-eslint/recommended", "plugin:storybook/recommended", "plugin:react/recommended"],
"plugins": ["unused-imports", "#typescript-eslint", "json-format"],
"overrides": [
{
"files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
"rules": {
"import/order": [
"error",
{
"groups": ["builtin", "external", "internal"],
"pathGroups": [
{
"pattern": "react",
"group": "external",
"position": "before"
}
],
"pathGroupsExcludedImportTypes": ["react"],
"newlines-between": "always",
"alphabetize": {
"order": "asc",
"caseInsensitive": true
}
}
],
"semi": "error",
"no-unused-vars": "off",
"object-curly-spacing": ["error", "always"],
"unused-imports/no-unused-imports": "error",
"unused-imports/no-unused-vars": [
"warn",
{ "vars": "all", "varsIgnorePattern": "^_", "args": "after-used", "argsIgnorePattern": "^_" }
],
"no-multiple-empty-lines": ["error", { "max": 1, "maxEOF": 0, "maxBOF": 0 }],
"brace-style": ["error", "1tbs"],
"indent": ["error", 2],
"max-len": [
"warn",
{
"code": 80,
"tabWidth": 2,
"comments": 80,
"ignoreComments": false,
"ignoreTrailingComments": true,
"ignoreUrls": true,
"ignoreStrings": true,
"ignoreTemplateLiterals": true,
"ignoreRegExpLiterals": true
}
],
"jsx-quotes": ["error", "prefer-double"],
"quotes": ["error", "single"],
"space-infix-ops": ["error"],
"#typescript-eslint/no-explicit-any": "error",
"#typescript-eslint/type-annotation-spacing": "error",
"react/jsx-sort-props": [
2,
{
"callbacksLast": true,
"shorthandFirst": false,
"shorthandLast": true,
"ignoreCase": true,
"noSortAlphabetically": false
}
],
"react/react-in-jsx-scope": "off",
"newline-before-return": "error"
}
}
],
"env": {
"jest": true
}
}
My package.json includes the following dependencies:
"dependencies": {
"#emotion/cache": "^11.7.1",
"#emotion/react": "^11.9.0",
"#emotion/server": "^11.4.0",
"#emotion/styled": "^11.8.1",
"#mui/icons-material": "^5.6.1",
"#mui/material": "^5.6.1",
"next": "12.1.4",
"next-i18next": "^11.0.0",
"react": "18.0.0",
"react-dom": "18.0.0"
},
"devDependencies": {
"#babel/core": "^7.17.9",
"#storybook/addon-actions": "^6.4.21",
"#storybook/addon-essentials": "^6.4.21",
"#storybook/addon-interactions": "^6.4.21",
"#storybook/addon-links": "^6.4.21",
"#storybook/builder-webpack5": "^6.4.21",
"#storybook/manager-webpack5": "^6.4.21",
"#storybook/react": "^6.4.21",
"#storybook/testing-library": "^0.0.9",
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^13.0.1",
"#types/node": "17.0.23",
"#types/react": "18.0.1",
"#types/react-dom": "18.0.0",
"#typescript-eslint/eslint-plugin": "^5.19.0",
"#typescript-eslint/parser": "^5.19.0",
"babel-jest": "^27.5.1",
"babel-loader": "^8.2.4",
"chromatic": "^6.5.4",
"cz-conventional-changelog": "^3.3.0",
"cz-emoji": "^1.3.1",
"eslint": "^8.13.0",
"eslint-config-next": "12.1.4",
"eslint-plugin-json-format": "^2.0.1",
"eslint-plugin-react": "^7.29.4",
"eslint-plugin-storybook": "^0.5.8",
"eslint-plugin-unused-imports": "^2.0.0",
"husky": "^7.0.4",
"jest": "^27.5.1",
"typescript": "^4.6.3"
}
Maybe add "javascript" to your "eslint.validate" setting:
{
"workbench.colorTheme": "Webstorm IntelliJ Darcula Theme",
"editor.formatOnSave": true,
"editor.defaultFormatter": "dbaeumer.vscode-eslint",
"eslint.format.enable": true,
"diffEditor.ignoreTrimWhitespace": false,
"typescript.updateImportsOnFileMove.enabled": "always",
// enable for eslint-plugin json-format
"eslint.validate": ["json", "javascript"],
"window.zoomLevel": 1,
"i18n-ally.localesPaths": [
"src/translations"
],
"i18n-ally.keystyle": "nested",
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
}
I've set up import aliases in my Expo project. It's compiling fine however VS Code doenst recognise the import:
In tsconfig.json
{
"compilerOptions": {
"allowSyntheticDefaultImports": true,
"jsx": "react-native",
"lib": ["dom", "esnext"],
"moduleResolution": "node",
"noEmit": true,
"skipLibCheck": true,
"resolveJsonModule": true,
"baseUrl": "./",
"paths": {
"home": ["./"]
}
}
}
In babel.config.js
module.exports = function(api) {
api.cache(true);
return {
presets: ["babel-preset-expo"],
plugins: [
[
"module-resolver",
{
alias: {
home: "./"
}
}
]
]
};
};
The import in the file works: import Thing from "home/src/thing";
I thought this would make VS Code aware of the alias but it appears not to do anything
In jsconfig.json:
{
"compilerOptions": {
"target": "es2017",
"allowSyntheticDefaultImports": false,
"baseUrl": "./",
"paths": {
"home/*": ["./*"]
}
},
"exclude": ["node_modules", "dist"]
}
I'm having a super annoying issue where a settings conflict of some sort is preventing the lint from adjusting the file as it should. I am using Wes Bos' ESLint/Prettier configuration. For example, I have a Vue file:
<script>
import { mapState, mapActions } from "vuex";
export default {
data: () => ({
valid: false <-------- Also receive eslint(comma-dangle) error here
}),
computed: {
...mapState("account", ["status"]),
},
methods: {
...mapActions("account", ["login", "logout"]),
},
created() {}
};
</script>
However in my .eslintrc I have this rule, because I prefer script code to be indented once:
"vue/script-indent": [
"warn",
2,
{
"baseIndent": 1
}
],
When I save the file to allow Prettier to reformat and fix those errors, I can see the comma-dangle and indent issues be fixed for a split second before they revert back and show all of the errors again. Where is the conflict occurring?
ESLint/Prettier is very new to me, and I'm just trying to get a good system in place! Any help would be greatly appreciated.
Other related files:
VSCode settings.json
{
"breadcrumbs.enabled": true,
"editor.autoClosingBrackets": "always",
"editor.autoClosingQuotes": "always",
"editor.formatOnPaste": true,
"editor.formatOnType": true,
"editor.fontFamily": "FiraCode-Retina",
"editor.fontWeight": "500",
"editor.letterSpacing": 0.5,
"editor.lineHeight": 20,
"editor.minimap.enabled": false,
"editor.tabSize": 2,
"emmet.includeLanguages": {
"erb": "html",
"javascript": "javascriptreact",
"vue-html": "html",
"vue": "html",
"scss": "scss"
},
"files.associations": {
"*.js.erb": "javascript"
},
"gitlens.codeLens.authors.enabled": false,
"gitlens.codeLens.recentChange.enabled": false,
"gitlens.hovers.currentLine.over": "line",
"html.format.indentInnerHtml": true,
"javascript.preferences.quoteStyle": "single",
"search.useReplacePreview": false,
"terminal.integrated.fontWeightBold": "normal",
"workbench.colorTheme": "Atom One Dark",
"workbench.editor.tabCloseButton": "left",
"workbench.iconTheme": "material-icon-theme",
"vim.statusBarColors.normal": "#f4f4f4",
// These are all my auto-save configs
"editor.formatOnSave": true,
// turn it off for JS and JSX, we will do this via eslint
"[javascript]": {
"editor.formatOnSave": false
},
"[javascriptreact]": {
"editor.formatOnSave": false
},
// tell the ESLint plugin to run on save
"editor.codeActionsOnSave": {
"source.fixAll": true
},
// Optional BUT IMPORTANT: If you have the prettier extension enabled for other languages like CSS and HTML, turn it off for JS since we are doing it through Eslint already
"prettier.disableLanguages": [
"javascript",
"javascriptreact"
],
}
package.json
{
"name": "app",
"version": "0.1.0",
"private": true,
"scripts": {
"start": "node --max_old_space_size=4096 node_modules/.bin/vue-cli-service serve",
"build": "vue-cli-service build --mode production",
"lint": "vue-cli-service lint"
},
"dependencies": {
"#vuex-orm/core": "0.33.0",
"#vuex-orm/plugin-axios": "^0.7.0",
"axios": "^0.19.0",
"convert-units": "^2.3.4",
"core-js": "^2.6.5",
"dayjs": "^1.8.16",
"echarts": "^4.3.0",
"fibers": "^4.0.1",
"lodash": "^4.17.15",
"material-design-icons-iconfont": "^5.0.1",
"sass": "^1.23.0",
"sass-loader": "7.1.0",
"vee-validate": "^3.0.11",
"vue": "^2.6.10",
"vue-headful": "^2.0.1",
"vue-router": "^3.0.3",
"vuedraggable": "^2.23.2",
"vuetify": "2.1.9",
"vuex": "^3.0.1"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^3.12.0",
"#vue/cli-plugin-eslint": "^3.12.0",
"#vue/cli-service": "^3.12.0",
"#vue/eslint-config-airbnb": "^4.0.0",
"babel-eslint": "^10.0.1",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.0.0",
"vue-cli-plugin-vuetify": "^1.0.1",
"vue-template-compiler": "^2.6.10",
"vuetify-loader": "^1.2.2"
}
}
I think the cause of the conflict is this setting in settings.json:
"editor.formatOnSave": true,
the editor is set to "editor.tabSize": 2, and the default prettier setting is
"none" for the trailing comma. So it must be overriding whatever settings you had for eslint that runs on save. You can try setting:
"editor.formatOnSave": false,
alternatively you can change the editor.tabSize setting and add
"prettier.trailingComma": "es5",
Same issue, it's working for me.
{
"editor.formatOnSave": false,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
}
I have the following error suddenly happens
Typescript Error
Duplicate identifier 'Map'.
/node_modules/#types/googlemaps/index.d.ts
Tried this way but it wasnt fixed
ionic 2 Duplicate identifier 'export='
my tsconfig file looks like below
{
"compilerOptions": {
"target": "es5",
"module": "es2015",
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"allowSyntheticDefaultImports": true,
"declaration": false,
"sourceMap": true,
"noUnusedParameters": false,
"lib": [
"dom",
"es2015"
]
},
"types": [
"jasmine"
],
"include": [
"src/**/*.ts"
],
"exclude": [
"node_modules"
],
"compileOnSave": false,
"atom": {
"rewriteTsconfig": false
},
"awesomeTypescriptLoaderOptions": {
"forkChecker": true,
"useWebpackText": true
}
}
ionic -v 3.2.0
Check the section on #types, typeRoots and types
in tsconfig.json docs.
Because you have included
"types": [
"jasmine"
],
Typescript will only pick jasmine type declarations. You should add googlemaps to the array as well.
"types": [
"jasmine",
"googlemaps
],
Or remove the types array from tsconfig.json as typescript is configured to look at #types from node_modules by default.
Check this answer for further information.