I downloaded a frontend template online and yarn installed all packages and an .eslint.json file does exist and the extension is installed in Visual Studio Code but it does not show any linting errors.
Here is my .eslint.json file
{
"parser": "babel-eslint",
"parserOptions": {
"ecmaVersion": 6,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true,
"modules": true,
"experimentalObjectRestSpread": true
}
},
"extends": [
"airbnb",
"prettier",
"prettier/react",
"plugin:flowtype/recommended"
],
"plugins": ["flowtype", "react"],
"env": {
"browser": true,
"node": true,
"jest": true
},
"rules": {
"import/no-extraneous-dependencies": ["error", { "packageDir": "./" }],
"jsx-a11y/anchor-is-valid": [
"error",
{
"components": ["Link"],
"specialLink": ["to"]
}
]
}
}
Here is my package.json file
{
"name": "reactjs-template",
"version": "0.1.0",
"private": true,
"dependencies": {
"eslint-plugin-prettier": "^3.1.1",
"react": "^16.6.3",
"react-dom": "^16.6.3",
"react-scripts": "2.1.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"test:auto": "mocha test",
"eject": "react-scripts eject",
"lint": "eslint src --ext .js,.jsx",
"flow": "flow"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-preset-flow": "^6.23.0",
"chai": "^4.2.0",
"chai-as-promised": "^7.1.1",
"eslint": "^6.6.0",
"eslint-config-airbnb": "^17.1.0",
"eslint-config-prettier": "^6.6.0",
"eslint-plugin-flowtype": "^3.2.0",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-jsx-a11y": "^6.1.2",
"eslint-plugin-react": "^7.11.1",
"flow-bin": "0.83.0",
"flow-typed": "^2.5.1",
"mocha": "^5.2.0",
"prettier": "^1.19.1",
"selenium-webdriver": "^4.0.0-alpha.1"
}
}
here is my settings.json file
{
"editor.suggestSelection": "first",
"vsintellicode.modify.editor.suggestSelection": "choseToUpdateConfiguration",
"eslint.packageManager": "yarn",
"javascript.autoClosingTags": false,
"javascript.format.enable": false,
"javascript.format.insertSpaceAfterCommaDelimiter": false,
"javascript.format.insertSpaceAfterFunctionKeywordForAnonymousFunctions": false,
"javascript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBraces": false,
"javascript.format.insertSpaceAfterKeywordsInControlFlowStatements": false,
"javascript.format.insertSpaceAfterSemicolonInForStatements": false,
"javascript.format.insertSpaceBeforeAndAfterBinaryOperators": false,
"typescript.tsc.autoDetect": "off",
"files.eol": "\n",
"prettier.endOfLine": "lf",
"prettier.jsxSingleQuote": true,
"prettier.singleQuote": true,
"javascript.updateImportsOnFileMove.enabled": "always",
"eslint.alwaysShowStatus": true,
"eslint.lintTask.enable": true,
"eslint.run": "onSave",
"eslint.autoFixOnSave": true
}
The template I downloaded is a personal one for a company but here is the package.json to see what it entails
If and not missing something, to make it work follow or check you did the next steps:
Download ESLint and Prettier extensions for VSCode if you didn't
Install ESlint and Prettier libraries in your project npm install -D eslint prettier (or use yarn)
Install eslint-config-prettier (disables formatting for ESLint) and eslint-plugin-prettier (allows ESLint to show formatting errors as we type) npm install -D eslint-config-prettier eslint-plugin-prettier
After that and if all your dependencies are installed taking in consideration your eslintrc file, you should be able to restart vscode and see the errors in the editor directly.
Note that this is something "generic" and you may need to install more packages to add more validations.
Related
I am new to Vue.js and I am having an issue and have been stuck for a long while trying different fixes.
After starting a dev server using npm run serve, I would expect that when I make changes to any .vue or .js files within my directory, the server would refresh and display these changes. However, no matter what I try nothing happens. Nothing is compiling and nothing changes within my terminal. The only way I can refresh the server is by closing it and running a new one. Refreshing my browser page does nothing either. Really stumped on this one so will be eternally grateful if anyone can help as none of the fixes I found on here have worked for me :(
My vue.config.js is as follows:
const { defineConfig } = require('#vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
devServer: {
client: {
progress: true
},
hot: false,
watchFiles: {
paths: ['src/**/*.js', 'src/**/*.vue', 'src/**/*.json', 'src/views/*.vue']
},
liveReload: true,
}
})
My package.json is:
{
"name": "product-and-cart",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^3.8.3",
"nodemon": "^2.0.19",
"vue": "^3.2.13",
"vue-router": "^4.0.3"
},
"devDependencies": {
"#babel/core": "^7.12.16",
"#babel/eslint-parser": "^7.12.16",
"#vue/cli-plugin-babel": "~5.0.0",
"#vue/cli-plugin-eslint": "~5.0.0",
"#vue/cli-plugin-router": "~5.0.0",
"#vue/cli-service": "~5.0.0",
"#vue/eslint-config-standard": "^6.1.0",
"eslint": "^7.32.0",
"eslint-plugin-import": "^2.25.3",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^5.1.0",
"eslint-plugin-vue": "^8.0.3",
"sass": "^1.54.5",
"sass-loader": "^13.0.2",
"webpack": "^5.74.0"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/vue3-essential",
"#vue/standard"
],
"parserOptions": {
"parser": "#babel/eslint-parser"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead",
"not ie 11"
]
}
And my jsconfig.json is:
{
"compilerOptions": {
"target": "es5",
"module": "esnext",
"baseUrl": "./",
"moduleResolution": "node",
"paths": {
"#/*": [
"src/*"
]
},
"lib": [
"esnext",
"dom",
"dom.iterable",
"scripthost"
],
"jsx": "preserve"
}
}
And babel.config.js:
module.exports = {
presets: [
'#vue/cli-plugin-babel/preset'
]
}
In your vue.config.js file, you set hot module replacement to false in devServer configuration; therefore, your changes won't be applied without refreshing the page. Hot module replacement is enabled by default in Vue CLI, you can remove hot from the configuration. Also, you don't have to set liveReload and watch options for this.
For more details, you can take a look at Vue CLI configuration and Webpack DevServer configuration.
I get an error when I run the program (vue3 + elements plus), but I don't know what's wrong with it. please help me.
Here is the error description and picture:
56:23 error Parsing error: Unexpected token, expected "," (11:23)
enter link description here
package.json
{
"name": "vueui",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^3.8.3",
"element-plus": "^2.1.3",
"vue": "^3.2.13"
},
"devDependencies": {
"#babel/core": "^7.12.16",
"#babel/eslint-parser": "^7.17.0",
"#vue/cli-plugin-babel": "~5.0.0",
"#vue/cli-plugin-eslint": "~5.0.0",
"#vue/cli-service": "~5.0.0",
"eslint": "^7.32.0",
"eslint-plugin-vue": "^8.0.3"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "#babel/eslint-parser"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead",
"not ie 11"
]
}
In the current configuration, eslint cannot deal with TypeScript. The following steps enable TypeScript support.
Run npm install --save-dev #vue/eslint-config-typescript
Adapt the ESLint config:
Remove "parser": "#babel/eslint-parser" from the parserOptions
Add "#vue/typescript/recommended" to the extends key
Based on your file above, it would look like this:
{
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended",
"#vue/typescript/recommended"
],
"parserOptions": {},
"rules": {}
}
Depending on your ESLint version, the installation of #vue/eslint-config-typescript might result in a dependency conflict. With ESLint < 9 you'll have to install #vue/eslint-config-typescript#10
If Code Works Then You need to configure esLint if it throw an error then u need to place correctlly place it between {}
Failed to load plugin 'vue' declared in 'package.json': Package subpath './lib/rules/array-bracket-spacing' is not defined by "exports" in C:\Users\<my_username>\FolderX\Subfolder\<appname>\eslint\package.json
Referenced from: C:\Users\<my_username>\FolderX\Subfolder\<appname>\package.json
That's the error I'm getting every time I npm run serve I've upated eslint, added prettier and fixed most of my vulnerability problems, and it still persists. I've combed the eslint issues on github and there is nothing like this, some issues are similar but they refer to eslintrc. Nothing is matching this exactly. I should mention that the app itself is very small and simple. It was supposed to be the start of a project but when I was adding views to the project, this happened.
package.json
"name": "online-birth-registration-system",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^3.6.5",
"vue": "^2.6.11",
"vue-router": "^4.0.14"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^5.0.3",
"#vue/cli-plugin-eslint": "^5.0.1",
"#vue/cli-service": "^5.0.3",
"babel-eslint": "^10.1.0",
"eslint": "^8.11.0",
"eslint-plugin-vue": "^6.2.2",
"prettier-eslint": "^13.0.0",
"vue-template-compiler": "^2.6.11"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
Any help would be greatly appreciated.
I ran into the same issue with array-bracket-spacing and was able to fix it by downgrading eslint in my package.json from "^8.6.0" to "^7.32.0". None of the other suggested fixes worked for me either
Upgraded eslint-plugin-vue to 9.1.1
Solved it for me
I have a personal project with some friends where we have configured eslint and prettier and they are running like "automatically" when project is compiling. So, while I am working on my tasks and project is running, if I have a prettier error some where, or a linter error (an import or variable I typed but I am not using yet), project will directly FAIL and won't compile anymore....
Example:
This is super SUPER annoying. Those things are things that shouldn't break the app, I should be able to keep working and seeing the app compiled.
In my previous and current company we had and have prettier and/or eslint in the projects but they didnt run automatically, they just run when you type the commands on the terminal, or when commiting, husky ran the commands for you. Configuration is different and I tried to copy it but it never worked.
I have been trying for days googling this but nothing is working...
I want prettier and eslint to inform me the errors only when I write the commands by myself on the terminal (npm run lint and npm run format), but it looks like they are being ran by theirselves everytime project compiles...
This is the package.json:
{
"name": "gamma-project",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"#types/jest": "^26.0.15",
"#types/node": "^12.0.0",
"#types/react": "^16.9.53",
"#types/react-dom": "^16.9.8",
"firebase": "8.0.2",
"i18next": "^19.9.0",
"i18next-browser-languagedetector": "^6.0.1",
"moment": "^2.29.1",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-i18next": "^11.8.8",
"react-phone-input-2": "^2.13.9",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.1",
"react-use-gesture": "^9.1.3",
"react-verification-code-input": "^1.2.9",
"styled-components": "^5.2.1",
"typescript": "^4.1.3",
"web-vitals": "^0.2.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"lint": "eslint . --fix ",
"format": "prettier --write \"./**/*.{ts,tsx}\" --config ./.prettierrc"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"#types/react-router-dom": "^5.1.6",
"#types/styled-components": "^5.1.7",
"#types/webpack-env": "^1.16.0",
"#typescript-eslint/eslint-plugin": "^4.11.1",
"#typescript-eslint/parser": "^4.11.1",
"eslint": "^7.17.0",
"eslint-config-prettier": "^7.1.0",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-prettier": "^3.3.0",
"eslint-plugin-react": "^7.22.0",
"eslint-plugin-react-hooks": "^4.2.0",
"husky": ">=4",
"lint-staged": ">=10",
"prettier": "^2.2.1"
}
}
.prettierrc:
{
"semi": true,
"tabWidth": 4,
"printWidth": 100,
"singleQuote": false,
"jsxSingleQuote": false,
"trailingComma": "none",
"jsxBracketSameLine": true,
"endOfLine": "auto"
}
.eslintrc.js:
module.exports = {
parser: "#typescript-eslint/parser",
root: true, // Make sure eslint picks up the config at the root of the directory
parserOptions: {
ecmaVersion: 2020, // Use the latest ecmascript standard
sourceType: "module", // Allows using import/export statements
ecmaFeatures: {
jsx: true // Enable JSX since we're using React
}
},
settings: {
react: {
version: "detect" // Automatically detect the react version
}
},
env: {
browser: true, // Enables browser globals like window and document
amd: true, // Enables require() and define() as global variables as per the amd spec.
node: true // Enables Node.js global variables and Node.js scoping.
},
extends: [
"eslint:recommended",
"plugin:react/recommended",
"plugin:jsx-a11y/recommended",
"plugin:prettier/recommended",
"plugin:#typescript-eslint/eslint-recommended",
"plugin:#typescript-eslint/recommended",
"prettier/#typescript-eslint"
],
plugins: ["#typescript-eslint"],
rules: {
"react/jsx-sort-props": 2,
"no-console": 2,
"prettier/prettier": ["error", {}, { usePrettierrc: true }], // Use our .prettierrc file as source
"#typescript-eslint/explicit-module-boundary-types": ["error"],
"#typescript-eslint/no-explicit-any": ["error"],
"#typescript-eslint/no-unused-vars": ["error"],
"#typescript-eslint/explicit-function-return-type": [
"error",
{
allowExpressions: false,
allowTypedFunctionExpressions: true,
allowHigherOrderFunctions: true,
allowDirectConstAssertionInArrowFunctions: true,
allowConciseArrowFunctionExpressionsStartingWithVoid: true
}
],
"#typescript-eslint/naming-convention": [
"error",
{
selector: "interface",
format: ["PascalCase"],
custom: {
regex: "^I[A-Z]",
match: true
}
}
]
}
};
I am praying to God someone in Stack Overflow to know exactly how to configure this to not do that, cause it really annoys me to the point that I close vcode and don't code anymore hahah.
If you don't want eslint to break your project, just rename the errors as warnings. The way you do this is to set emitWarning: true:
module.exports = {
entry: '...',
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'eslint-loader',
options: {
emitWarning: true,
},
},
],
},
};
If that doesn't work out, try this plug-in, which converts all eslint errors to warnings: https://github.com/bfanger/eslint-plugin-only-warn.
I am relatively new to Node js and was working on .NET MVC. When I am trying to run it using command node index its giving me an below error.
H:\Services\src>node index
H:\Services\src\index.js:1
import app from './app';
^^^^^^
SyntaxError: Cannot use import statement outside a module
?[90m at Module._compile (internal/modules/cjs/loader.js:895:18)?[39m
?[90m at Object.Module._extensions..js (internal/modules/cjs/loader.js:995:10)?[39m
?[90m at Module.load (internal/modules/cjs/loader.js:815:32)?[39m
?[90m at Function.Module._load (internal/modules/cjs/loader.js:727:14)?[39m
?[90m at Function.Module.runMain (internal/modules/cjs/loader.js:1047:10)?[39m
?[90m at internal/main/run_main_module.js:17:11?[39m
Below is my package.json file. It says it is using node version 8.0.0 and npm version 5.0.0. Bt I have installed node version is v12.14.0 and NPM installed version is 6.13.4.
{
"name": "core",
"version": "0.0.1",
"description": "Core",
"main": "dist/index.js",
"engines": {
"node": "8.0.0",
"npm": "5.0.0"
},
"scripts": {
"prestart": "npm run -s build",
"start": "node dist/index.js",
"dev": "nodemon src/index.js --exec \"node -r dotenv/config -r babel-register\" localdev",
"clean": "rimraf dist && rimraf -p",
"build": "npm run clean && mkdir -p dist && babel src -s -D -d dist",
"test": "jest --watch",
"lint": "esw -w src test"
},
"keywords": [
"express",
"babel",
"es6",
"es2015",
"es2016",
"es2017",
"eslint"
],
"author": "ABC",
"license": "UNLICENSED",
"dependencies": {
"babel-cli": "6.26.0",
"babel-plugin-transform-object-rest-spread": "6.26.0",
"babel-preset-env": "1.6.1",
"cors": "2.8.5",
"express": "4.16.4",
"js-yaml": "3.12.2",
"mssql": "5.0.0",
"winston": "3.1.0",
"winston-daily-rotate-file": "3.5.1"
},
"devDependencies": {
"babel-eslint": "7.2.3",
"babel-jest": "21.0.2",
"babel-register": "6.24.1",
"dotenv": "4.0.0",
"eslint": "4.10.0",
"eslint-config-airbnb-base": "12.1.0",
"eslint-plugin-import": "2.8.0",
"eslint-plugin-jest": "21.0.2",
"eslint-watch": "3.1.0",
"nodemon": "1.18.10",
"rimraf": "2.6.3"
},
"babel": {
"presets": [
[
"env",
{
"targets": {
"node": "current"
}
}
]
],
"plugins": [
"transform-object-rest-spread"
]
},
"eslintConfig": {
"parser": "babel-eslint",
"plugins": [
"import",
"jest"
],
"parserOptions": {
"ecmaVersion": 2017,
"sourceType": "module"
},
"env": {
"node": true,
"jest": true
},
"extends": [
"eslint:recommended"
]
}
}
I have tried different google solutions for above error but each time gets a diff error depending upon steps I am doing to fix the issue. I am just looking to run this code and test it locally.
Thanks in advance.