Develop Reference

"Parsing error: No babel config file detected" when IDE not open at Vue projects root directory

I stumbled into a problem where in VS Code, when a Vue project is created and not open at root directory of the Vue project, babel.config.js wouldn't load and IDE would be confused as to where the babel config is.
All of my files show an error on the first character of any javascript/vue file reading
No Babel config file detected for [#]... or configure babel so that it can find the config files.

Adding the block to settings.json will solve this issue:
"eslint.workingDirectories": [
{"mode": "auto"}
],
To access settings.json file, click Ctrl+, or from, File > Preferences > Settings,
then type eslint in the search bar, find Edit in settings.json in Options.

Two ways fix this issue, It's worked me 100%.
I'm using react.js. But I successfully fixed this issue. I think this solution will be helpful for you.
I've variously attempted to either set requireConfigFile to false or to create some sort of Babel config, in an .eslintrc.js, in a .babelrc (or Babel Configuratio file), and in a "babel" in package.json, all to no effect.
Method 1 - add this codes into .eslintrc.js
.eslintrc.js
"parser": '#babel/eslint-parser',
"parserOptions": {
"requireConfigFile": false,
}
Method 2 - install this package #babel/core
npm i --save-dev #babel/core
.babelrc
{
"presets": ["#babel/preset-env", "#babel/preset-react"],
"plugins": ["#babel/plugin-proposal-optional-chaining"]
}

https://babeljs.io/docs/en/config-files
Babel expects your config file to be at root level, so in order to un-confuse your IDE you need to create an eslint setting for VSCodes extention. Under vscode-eslint settings switch to workspace on the top tab, then scroll to:
Eslint: Options
The eslint options object to provide args normally passed to eslint when executed from a command line (see https://eslint.org/docs/developer-guide/nodejs-api#eslint-class).
Edit in settings.json <-click on that
Vs code will make a .vscode/ folder inside which a settings.jsonfile was created. There add this line:
{
"eslint.options": {
"configFile": "\\ABSOLUTE\\PATH\\TO\\YOUR\\PROJECT\\VUE_PROJECT\\babel.config.js"
}
}
This will tell the IDE what to do.

Create a file inside your application with name .eslintrc.js
and paste this code:
module.exports = {
extends: 'eslint-config-antife',
plugins: [
"babel",
"html",
]
}

I got this when I amended some of the script settings in package.json. Not precisely sure what mistake I made: I just undid all typing in this file, and things started working again.

Again install ES lint from Visual Studio. This problem will be solve. First uninstall ES Lint and then again install ES Lint.

In my little Vue app,
Add : "requireConfigFile":false in my package.json made it Alright!
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "#babel/eslint-parser",
"requireConfigFile":false
},
"rules": {}
},

How to force babel to ignore syntax but not the file?

I am trying to use babel to copy my files to a lib folder (so later on I use them as shared components for other projects). I don't want babel to transpile the React code since I will do it in my main projects. But I do want babel to change absolute paths to relative paths while copying the files. Nothing else.
All I want from babel so to convert:
import Temp from 'components/Temp';
To
import Temp from './src/components/Temp';
My project doesn't have any Webpack, don't need that actually. It only has Storybook and bunch of components.
this is my .babelrc:
{
"comments": true,
"compact": false,
"plugins": [
[
"module-resolver",
{
"root": ["."],
"alias": {
"components": "./src/components",
"pages": "./src/pages",
"shared": "./src/shared",
"mocks": "./src/mocks"
},
"cwd": "babelrc"
}
]
]
}
this is my package.json build script:
"build": "babel src --out-dir lib --ignore README.md,src/.next,**/*.stories.js --copy-files",
While the copy for some files happen at some point it stops and because of different errors like this syntax errors:
"Support for the experimental syntax 'classProperties' isn't currently enabled"
I want babel to ignore anything that it sees in the files and just change the import file addresses. I don't want to include plugins like "#babel/plugin-syntax-class-properties". There are JSX and lots of other stuff in each file and I don't want babel to touch them.
Is the a way to force babel to close its eyes on Syntax errors and just use the "module-resolver" plugin?
My babel version is 7
Thanks!

Eslint/Tslint Config help (excluding files)

Recently in our project we migrated to use the #typescript-eslint/parser to slowly migrate from tslint. Everything has mostly been smooth but I have a small problem/question I can't work out.
Do I need to specify ignore files/patterns in both the tsconfig exclude array, as well as the ignorePatterns on the .eslintrc export object? What is the difference?
We have a messages.js file inside our src/lang directory that I'm trying to ignore but currently throws a lint error on our pre-commit hook, which got me wondering about this question and how these two setups work together.
Parsing error: "parserOptions.project" has been set for '#typescript-eslint/parser'
The file does not match your project config: src/lang/messages.js. The file must be included in at least one of the projects provided
I think my understanding of these intertwine is off, as when eslint runs, I thought the parserOptions would pick up the project rules from the tsconfig, where the js files are excluded.
Currently, the sections I'm talking about in our eslintrc looks like:
module.exports = {
parser: '#typescript-eslint/parser',
parserOptions: {
project: path.resolve(__dirname, './tsconfig.json'),
tsconfigRootDir: __dirname,
useJSXTextNode: true,
sourceType: 'module',
ecmaFeatures: {
modules: true,
jsx: true,
},
},
ignorePatterns: ['node_modules/**', '.storybook/**', 'src/stories/**', '*.scss', '*.js'] // ignoring here works
tsconfig:
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
"exclude": ["node_modules", "src/**/*.js"], // exclude here doesn't work.
package.json:
"scripts": {
"lint": "tsc --project ./tsconfig.json --noEmit && eslint --ext=jsx,ts,tsx src"
},
​

ESLint passes the #typescript-eslint/parser plugin a list of files (which ESLint obtains from the command-line). The #typescript-eslint/parser plugin cannot control this list, so it does its best to act based upon the list it is given.
The error message is attempting to inform the user that ESlint is linting a file that is excluded from being parsed by the #typescript-eslint/parser plugin. From the plugin's perspective, there are two reasons this could occur:
The file was purposefully, explicitly excluded (by adding it to the tconfig exclude).
The user forgot to add the file to the tsconfig include.
In the latter case (which is much more common), the plugin wants to inform the user that their config is wrong, so that they can correct it. Hence the error message you saw.
In order to correctly exclude files from TSLint, one option is to use a .eslintignore file.
You can also change the eslint command to ignore the excluded files:
eslint ... --ignore-pattern "src/**/*.js"
(But be aware that the ignore pattern is relative to the current directory, not relative to the location of tsconfig etc.)
Alternatively, if you do want ESLint to lint the files (but still exclude them in tsconfig), you can consider providing a more inclusive tsconfig for #typescript-eslint/parser by creating a tsconfig.eslint.json file that extends from your normal tsconfig.
Also see these GitHub issues:
#typescript-eslint/parser doesn't ignore files, which is excluded by/in tsconfig.json #905
parse error on excluded files #1174
Exclude files in tsconfig without throwing an #typescript-eslint/parser error #1350

I was able to use the tsconfig exclude by using the JS config file .eslintrc.js and doing the following:
const tsConfig = require('./tsconfig.eslint.json');
module.exports = {
...
ignorePatterns: tsConfig.exclude,
};

Exclude folder when compiling typescript

I use Atom to write code. It uses tsconfig.json to include and exclude folders. In order to use intellisense I need node_modules to be included, but when I want to compile it to js I don't want node_modules to be compiled.
So I need to call tsc in the upper folder where the config.ts is, and this results in compiling the whole node_modules.
My folder structure looks like this:
node_modules
config.ts
spec
|--test1.ts
|--test2.ts
Any idea how to exclude node_modules when compiling with tsc command?

Use exclude property
{
"compilerOptions": {
...
}
"exclude": [
"node_modules"
]
}
Files included using "include" can be filtered using the "exclude" property. However, files included explicitly using the "files" property are always included regardless of "exclude". The "exclude" property defaults to excluding the node_modules, bower_components, jspm_packages and directories when not specified.
link updated:
https://www.typescriptlang.org/tsconfig#exclude

How to remove comments from transpiled code using babel-cli

I've been looking around for some .babelrc option to remove comments from the transpiled code, but I haven't had any luck. I tried this:
{
"comments": false
}
as well as
{
"options": {
"comments": false
}
}
and neither works. I'm out of ideas, and I was unable to find any decent documentation anywhere.

Using .babelrc is always recommended:
{
comments: false
}
If using babel-cli, you can use the --no-comments options to achieve the same behaviour.
The latest version of babel-cli includes tests that check for this behaviour to be implemented correctly.
EDIT
It does look like a problem with babel CLI ignoring the comments in .babelrc , a workaround is to use the --no-comments option.
In your package.json
"build": "babel ./index.js --out-dir ./dist/index.js --no-comments"
To know all the options of babel-cli
./node_modules/.bin/babel -h
ORIGINAL
Where are you running babel from? Gulp?
Check that you have the .babelrc file in the same or a parent directory of the files beign transpiled
From babeljs.io:
Babel will look for a .babelrc in the current directory of the file
being transpiled. If one does not exist, it will travel up the
directory tree until it finds either a .babelrc, or a package.json
with a "babel": {} hash within.
I have a project with this structure:
dist
index.js
.babelrc
index.js
gulpfile.js
node_modules
...
The relevant task in gulpfile.js
gulp.task('babel', () => {
return gulp.src('index.js')
.pipe(babel({
presets: ['es2015']
}))
.pipe(gulp.dest('./dist/'));
});
Contents of .babelrc
{
"comments": false
}
The comments are being succesfully removed.
Also check if you're not setting the comments option to true in your gulpfile, for example.