I just created a new Vue app through Vue CLI but I can't use either debugger or console.log otherwise I get an error in the browser, why and how can I allow it ?
Unexpected 'debugger' statement (no-debugger) at src/components/SomeComponent.vue:48:7
In my case it was because I went with the default configs when creating my project and it includes eslint:
So in order to allow debugger and console.log statements I modified the rules on my package.json file like this:
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"rules": {
"no-console": 1,
"no-debugger": 1
},
"parserOptions": {
"parser": "babel-eslint"
}
}
This way I still get a warning when compiling so I don't forget to remove them before committing but I can run my app and use those statements.
You can use:
//eslint-disable-next-line no-console
only if your really have to use console.log()
otherwise I highly recommend to use a logger like 'vuejs-logger'.
What happens is like in production you still have these console.log lines that I actually don't like a lot... plus the warning during rebuilding prevents you from using the hot reload of your app during development.
Related
How do I create a Vue 2 project that uses ESLint + StandardJS + Prettier?
StandardJS's rules should naturally take precedence over Prettier's.
vue create only provides the following options:
ESLint + Standard
ESLint + Prettier
I tried 2 things:
I mixed the eslint configurations of both of the above options. It resulted in a dependency hell, and once that was solved it didn't really work as expected.
I added the prettier-standard package to my eslintrc.js, it didn't work as expected either. It's worth mentioning that prettier-standard works well when manually executing it from the command line.
I'm of course looking to set this up at the project config level and not at the IDE level.
Can you try this repo I've just created? Looks like it's working great from what I've tested.
https://github.com/kissu/so-eslint-standard-prettier-config
Notes
I created 2 projects and dumped the configuration of the standard one into the Prettier one, the changes can be seen in this commit
CLI's current version of #vue/eslint-config-standard is throwing an error (Environment key "es2021" is unknown) because it requires ESlint 7 to work, as shown in this changelog
bumping ESlint to the latest version 7.29.0, fixed the issue
to check your project's current version of ESlint, you can run npx eslint --version
of course, you need to have the ESlint extension enabled and Prettier one disabled (if using VScode), otherwise it may conflict
I've tried to remove #vue/prettier from
extends: ['plugin:vue/essential', 'eslint:recommended', '#vue/standard', '#vue/prettier']
and see if it's successfully removes any ; and it does!
The errors are indeed coming from ESlint (if we do remove #vue/prettier), and they're fixed by ESlint only upon save (after an ESlint server + VScode restart)!
Putting Prettier back works fine of course.
Luckly, I had a new PC, hence had the opportunity to try a whole fresh config with VScode.
I had to install ESlint only and have those settings into my settings.json
{
"editor.codeActionsOnSave": {
"source.organizeImports": false,
"source.fixAll": true,
"source.fixAll.eslint": true,
"source.fixAll.stylelint": true
}
}
The formatting works perfectly and nothing more is required.
I have eslint 7.8.1 with Vue Prettier on and i don't have any problem, maybe the version of eslint that you have is not compatible with Prettier or maybe your eslint have some errors?
In each way i will put my eslint configuration and maybe it will help you!
module.exports = {
env: {
'browser': true,
'es6': true,
'node': true
},
parserOptions: {
'parser': 'babel-eslint'
},
extends: [
'#vue/standard',
'plugin:vue/recommended'
],
rules: {
"vue/html-indent": ["error", 4, {
"attribute": 1,
"closeBracket": 0,
"switchCase": 0,
"ignores": []
}],
"vue/max-attributes-per-line": [2, {
"singleline": 10,
"multiline": {
"max": 1,
"allowFirstLine": false
}
}],
'indent': ['error', 4],
'vue/component-name-in-template-casing': ['error', 'kebab-case'],
'vue/script-indent': [
'error',
4,
{ 'baseIndent': 1 }
],
'space-before-function-paren': ['error', 'never'],
'semi': [2, "never"],
'vue/singleline-html-element-content-newline': 'off',
'vue/multiline-html-element-content-newline': 'off'
},
overrides: [
{
'files': ['*.vue'],
'rules': {
'indent': 'off'
}
}
]
}
Also maybe you have forgot some of the devDependecies on package.json, those are mine
"eslint": "^7.8.1",
"eslint-plugin-import": "^2.22.0",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-standard": "^4.0.1",
"eslint-plugin-vue": "^6.2.2"
Hope that those will help you !
Not sure what's going on here.
I am working on migrating from tslint to eslint. The basic migration seems to have gone smoothly (well, "smoothly" -- got some kinds in the rules that need to get worked out apparently), but I've run across this and I have no idea how to get past it:
1:1 error Definition for rule '#typescript-eslint/no-shadow' was not
found #typescript-eslint/no-shadow
I've modified the .eslintrc.js file like so (parts snipped for brevity):
module.exports = {
"env": {
"browser": true,
"es6": true,
"node": true
},
"parser": "#typescript-eslint/parser",
"parserOptions": {
"project": "tsconfig.json",
"sourceType": "module"
},
"plugins": [
"eslint-plugin-import",
"#angular-eslint/eslint-plugin",
"#typescript-eslint",
"#typescript-eslint/tslint"
],
"rules": {
// Many unrelated plugins, all rules, none mentioning no-shadow
"no-shadow": "off",
"#typescript-eslint/no-shadow": ["error", { "hoist": "all" }],
// Many other unrelated plugins, all rules, none mentioning no-shadow. But I thought
// This next one may be helpful.
"#typescript-eslint/tslint/config": [
"error",
{
"rules": {
"import-spacing": true,
"whitespace": [
true,
"check-branch",
"check-decl",
"check-operator",
"check-separator",
"check-type"
]
}
}
]
}
};
The versions of the plugins I'm working with are (copied from package.json):
"eslint-plugin-import": "^2.19.1",
"#typescript-eslint/eslint-plugin": "^2.34.0",
"#typescript-eslint/parser": "^2.34.0",
I'm at a loss as to what's going on, and my google searches have turned up nothing aside from "use "no-shadow": "off", which I do.
v2.34.0 of the typescript-eslint packages is 9 months old.
Upgrade to a more recent version of typescript-eslint.
#typescript-eslint/no-shadow was added in v4.0.0
I have a vue.js project with the storybook addon. I am trying to write a story using the Docs addon which allows you to write stories in .mdx, I am having trouble getting linting to work in vs code.
Thanks in advance and any help would be much appreciated!
I am using this sample project found here https://github.com/vueschool/storybook-fundamentals/tree/master.
The sample project has "eslint": "^6.7.2" installed.
I have installed "eslint-plugin-mdx": "^1.8.2"
I have the following extensions installed
My ES lint config looks like this, as suggested by https://github.com/mdx-js/eslint-mdx
{
"extends": ["plugin:mdx/recommended"]
}
It seems like vs code is picking up the mdx file but no linting seems to be happening, I'm I doing something wrong?
Also I have added the following to VS Code settings but it does not seem to be doing much
If this helps anyone. there is a dependency on eslint-plugin-react for eslint-mdx to work.
check https://github.com/mdx-js/eslint-mdx/issues/229
my eslint config looks like this for reference.
"root": true,
"env": {
"node": true
},
"extends": [
"eslint:recommended", "plugin:mdx/recommended", "plugin:react/recommended"
],
"parserOptions": {
"ecmaVersion": 12,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"settings": {
"react": {
"version": "detect"
}
}
I realize this question has been asked several times but all of the solutions I've come across don't seem to work for me. I'm running into the following error while trying to run Jest tests for a Vue app.
Jest encountered an unexpected token
This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.
By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".
Here's what you can do:
• To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
• If you need a custom transformation specify a "transform" option in your config.
• If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.
You'll find more details and examples of these config options in the docs:
https://facebook.github.io/jest/docs/en/configuration.html
Details:
/node_modules/vue-awesome/icons/expand.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import Icon from '../components/Icon.vue'
^^^^^^
SyntaxError: Unexpected token import
> 17 | import 'vue-awesome/icons/expand'
.babelrc:
{
"presets": [
["env", {
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}]
],
"env": {
"test": {
"presets": [
["env", { "targets": { "node": "current" }}]
]
}
}
}
jest config in package.json:
"jest": {
"moduleFileExtensions": [
"js",
"vue"
],
"moduleNameMapper": {
"^#/(.*)$": "<rootDir>/src/$1"
},
"transform": {
"^.+\\.js$": "<rootDir>/node_modules/babel-jest",
".*\\.(vue)$": "<rootDir>/node_modules/vue-jest"
},
"snapshotSerializers": [
"<rootDir>/node_modules/jest-serializer-vue"
],
"moduleDirectories": [
"node_modules",
"src"
]
}
It looks like the initial import in the script for the Vue component being mounted for the test is working but the import within the module itself (import Icon from '../components/Icon.vue) is not recognized.
boiler plate repo to re-creates the issue: github.com/DonaldPeat/stackoverflow-jest-question
How can I resolve this?
You just need to make sure that vue-awesome will be transformed by jest, so add
following to your jest config:
transformIgnorePatterns: ["/node_modules/(?!vue-awesome)"],
which means: "Ignore everything in node_modules except for vue-awesome.
Also here is exhausive list of other issues that might cause this error: https://github.com/facebook/jest/issues/2081
If you are encountering this problem after updating to a newer Jest version, try clearing Jest's internal cache:
jest --clearCache
Adding this in the package.json works for me (replace <package_name> with causing package name)
"jest": {
"transformIgnorePatterns": ["node_modules/(?!<package_name>)/"]
}
We had the same issue with another library. The root cause was that we had a circular dependency in code. But the error text did not refer to it at all. just like in this post: "Jest encountered an unexpected token..."
In my case I needed testEnvironment: "node" in jest.config.js file. The error came out when I started tests against Vue Router.
// jest.config.js
module.exports = {
preset: "#vue/cli-plugin-unit-jest/presets/typescript",
transform: {
"^.+\\.vue$": "vue-jest",
".+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$":
"jest-transform-stub",
},
moduleNameMapper: {
"^.+.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$":
"jest-transform-stub",
},
testEnvironment: "node", // It fixes my issue
};
Is it possible to deactivate this error in eslint?
Parsing error: 'import' and 'export' may only appear at the top level
ESLint natively doesnt support this because this is against the spec. But if you use babel-eslint parser then inside your eslint config file you can do this:
{
"parser": "babel-eslint",
"parserOptions": {
"sourceType": "module",
"allowImportExportEverywhere": true
}
}
Doc ref: https://github.com/babel/babel-eslint#configuration
my solution incase other dont work
"parserOptions": {
"ecmaVersion": 6,
"sourceType": "module"
}
Support for dynamic import has been added in eslint 6.2.
You need to set ecmaVersion to 11 (or 2020) though.
"parserOptions": {
"ecmaVersion": 11
...
}
You can test that in their online demo.
In my case:
Added javascriptreact for a react project. I guess the project type should be added to the plugins.
{
...,
"plugins": [
"prettier",
"javascriptreact"
],
...
}