ES6 support in VSCode isnt working - javascript

Ive seen other questions regarding this issue - Is there a way to turn on ES6/ES7 syntax support in vscode? - but this has now been addressed by Microsoft and implemented in VSCode.
However, I have downloaded the latest version of VSCode, and cloned the example es6 repo from GitHub, and it seems to not be working

To turn ES6/ES7 support, the best way is to use ESLint with dedicated parser ( babel, etc...). I try it if you're interested: VSCode Linter ES6 ES7 Babel linter.

If you're using eslint with npm, you may need the .eslintrc file in the root folder of your project. See my answer to this question and the docs for the ESLint VSCode extension.

Related

What governs the ECMAScript version in a create-react-app?

I am currently running a create-react-app, using react v16.2. I would like to use Optional chaining from ECMAScript 2021 (ES12). What governs the ECMAScript version in my app?
For example, in a nodejs backend app I know I need to upgrade my version of node, but I'm unsure how this translates to React.
EDIT - I'm currently on v16.2 and when i try to use optional chaining, I get an error message asking me to use a babel polyfill.
React uses Babel to transpile and polyfill the code i.e. convert your ES2015+ code to ES5 syntax. create-react-app uses Webpack as the build tool and Babel as the transpiler so you should safely be able to use the optional chaining ? syntax and when you run / build your app, it will work as intended.
Babel is what decides this, it's a JS-to-JS transpiler. In create-react-app, you get whatever plugins and presets the maintainers decided on, unless/until you decide to eject so you can manage your own config. If you do decide to do that, you can start with the config they provide and then add new babel presets and plugins on top of that. As of a couple years ago, there's no good way to add to their config without ejecting. For your specific need, it looks like they include that plugin, so if your dependencies are up to date, you should be good to go.

Is there anyway to debug typescript using the ember cli with vscode?

I searched on stackoverflow and found this post:
How to debug Javascript-Code produced and served by ember-cli?
however, it was made in 2014 and I hope maybe some features were added or anything.
I am trying to place breakpoints in vscode in my typescript files. However, it doesn't seem to work at all, because the ember cli doesn't map ts to js files that it creates.
To enable sourcemaps for TypeScript files in Ember, you must configure Babel to use inline sourcemaps. See: Enabling Sourcemaps in the ember-cli-typescript docs.

Transpiling es6 code in node_modules with React Native

I am attempting to integrate a module that uses es6 features such as arrow syntax with a react native project. Unfortunately react native doesn't seem to compile any code in the node_modules directory. I've experimented with the only and the ignore options in the .babelrc file but to no avail, it still outputs untranspiled es6 code from the node_modules folders and causes errors when it's ran on android. Is it possible and if so what is the best way of whitelising particular modules to transpile from the node_modules folder?
It turns out that react native does transpile the code from the node_modules folder. The issue was actually related to a bug in a custom plugin that is included with the babel-react-native preset. The bug report is here: https://github.com/facebook/react-native/issues/19511

How to integrate uglify-es in grunt?

I'm using gruntjs (which uses uglifyjs) to build my Angularjs app. But uglifyjs still does not support es6, so in corresponding GitHub issue i found this. So now there is uglify-es, which seemingly supports es6. But I'm not sure how to integrate it with grunt. Now i have module "grunt-contrib-uglify", which has a dependency uglifyjs, which is now used. How can i make grunt use uglify-es instead?
I've achived this by installing the harmony branch of grunt-contrib-uglify, which supports es6:
npm install git://github.com/gruntjs/grunt-contrib-uglify.git#harmony --save-dev
The ECMAScript version has finally been released.
You can now get the same result with the official version (it's no longer needed to pick it from GitHub)
npm install grunt-contrib-uglify-es --save-dev
https://www.npmjs.com/package/grunt-contrib-uglify-es

Obfuscate Node's Browserify Output

How can I obfuscate my Browserify bundle.js as it is generated?
I have tried a couple of obfuscators but they are out dated and do not work anymore.
I searched and search for a solution to this problem. In the end I simply used babel to "translate" my ES6 code into ES5 and worked from there. I couldn't manage to get to enforce a newer version of webkit.

Categories