I am using Visual Studio Code with a React Native project. ESLint is used to check the stuff specified in the .prettierrc.js.
When something isn't correct I get a hint like this:
Instead of getting these notifications and right clicking on them, selecting Fix this prettier/prettier problem, I want the problems to be fixed either automatically or using a shortcut combination. How can I configure that? I am currently using pure JavaScript, no Typescript.
Edit/create .vscode/settings.json so it will contain
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
}
Fixes issues on save.
Thanks for #jonrsharpe! Just want to add my few cents.
Go to settings.json file:
Windows %APPDATA%\Code\User\settings.json
macOS $HOME/Library/Application Support/Code/User/settings.json
Linux $HOME/.config/Code/User/settings.json
Add there:
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
}
Restart VSCode
Enjoy coding!))
UPDATE
While on Mac the solution above worked for me, on Windows to make it works I had to add following to settings.json :
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true,
"source.fixAll": true
},
"eslint.autoFixOnSave": true
Related
This is what I have in my user settings.json.
"editor.codeActionsOnSave": {
"source.organizeImports": true
},
Love the sorting, but don’t like that Visual Studio Code is removing unused imports vs greying them out.
Finally it's possible in 2021.
Replace source.organizeImports by source.sortImports.
"editor.codeActionsOnSave": {
"source.sortImports": true
},
This is currently not possible. See https://github.com/microsoft/TypeScript/issues/36085
i have been trying to find documentation on this but i havent been able to. I use stylint in a project and we have the css order option activated. I haven't been able to set up VS code to show the errors and i haven't found a page with the information to actually know the order,so i always need to check on compile time if i have any mistakes in the CSS order properties, and it shows a huge error on screen.
this are the stylelint rules we have
module.exports = {
extends: ['stylelint-config-standard', 'stylelint-config-concentric-order'],
rules: {
'at-rule-no-unknown': [
true,
{
ignoreAtRules: ['mixin', 'if', 'else', 'include', 'extend']
}
],
'max-nesting-depth': 4,
indentation: 4,
// add your custom config here
// https://stylelint.io/user-guide/configuration
'selector-pseudo-element-no-unknown': [
true,
{
ignorePseudoElements: ['v-deep']
}
]
}
}
I dont see anything weird about it. It there a page where i can find the correct order? it is so annoying because when i get a stylelint order error, i usually have to find it in a few tries.
You are extending the stylelint-config-concentric-order community config. This config includes and configures the stylelint-order community plugin. You can find the order of the properties in the repo on GitHub.
You can see Stylelint errors in VS Code using the official Stylelint extension.
And you can have the extension automatically fix problems on save, which will include the order of your properties, using the editor.codeActionsOnSave configuration property:
{
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll.stylelint": true
},
"stylelint.validate": ["css", "postcss","scss"],
"css.validate": false,
"scss.validate": false
}
Alternatively, you can run npx stylelint "**/*.scss" --fix" on the command line to automatically fix problems.
Even I set updates.enable=false in app.json, still clients getting updated versions from expo server automatically (without deploying apk/ios to store’s).
I set updates.enable=false in version 1.1.7. Clients with version 1.1.7, 1.1.8 and 1.1.9 got 1.2.0 version automatically without putting new version (1.2.0) into store(s).
I’m using expo build:android and expo build:ios commands for build.
Could anyone can help me about this problem? Is there any way to prevent update on code level?
You can find my app.json content below:
{
“expo”: {
“name”: “XXX”,
“slug”: “XXX”,
“privacy”: “public”,
“sdkVersion”: “31.0.0”,
“platforms”: [
“ios”,
“android”
],
“version”: “1.2.0”,
“orientation”: “portrait”,
“icon”: “./assets/icon.png”,
“splash”: {
“image”: “./assets/icon.png”,
“resizeMode”: “contain”,
“backgroundColor”: “#FFCB09”
},
“notification”: {
“icon”: “./assets/icon96gs.png”,
“color”: “#ffcd00”,
“androidMode”: “collapse”,
“androidCollapsedTitle”: “XXX”
},
“updates”: {
“enabled”:false
},
“assetBundlePatterns”: [
“**/*”
],
“android”:{
“package”:“com.xxx.yyy”,
“permissions” : [“CAMERA”, “LOCATION_HARDWARE”,“ACCESS_COARSE_LOCATION”,“ACCESS_FINE_LOCATION”],
“versionCode”: 17
},
“ios”: {
“bundleIdentifier”: “com.xxx.yyyt”,
“buildNumber” : “17”
},
“scheme” : “xxx”
}
}
you should upload your app in apple store and google play store. only after that updates will be switched off.
Because you created a stand-alone app with Expokit, the commands in the setup do not apply.
You have to set up your own settings in Android Studio and xcode.
"updates"
Configuration for how and when the app should request OTA JavaScript updates
{
"updates": {
/*
If set to false, your standalone app will never download any code.
And will only use code bundled locally on the device.
In that case, all updates to your app must be submitted through Apple review.
Defaults to true.
Note that this will not work out of the box with ExpoKit projects.
*/
"enabled": BOOLEAN,
...
}
ExpoKit: To change the value of enabled, edit ios//Supporting/EXShell.plist and android/app/src/main/java/host/exp/exponent/generated/AppConstants.java. All other properties are set at runtime.
I have the following configuration, but it still does not remove console.log statements:
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false,
pure_funcs: ['console.log'],
drop_console: true,
comments: false
},
pure_funcs: ['console.log'],
drop_console: true,
comments: false
})
What am I doing wrong?
It's possible that the messages you are getting are debugging messages in the console, rather than console.log. I had a similar issue where I thought using drop_console would suffice. I had to add drop_debugger as well, so given your example, this should remove all console output.
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false,
drop_console: true,
drop_debugger: true
},
comments: false
})
It is not the reason of uglifyjs in my case. It is caused by babel-loader which will transform console.log to (e = console).log.
I do not know how to fix it now. Finally, I have to use a babel plugin named babel-plugin-transform-remove-console to remove console.
However I do want to use UglifyJsPlugin.
This is a hint for those who can find out a resolution.
I had the same problem with drop_console not working in my react script setup (on Windows 10, React-script version 0.8.5).
Trying to reproduce this problem I created a brand new app, added console.log somewhere in App.js and drop_console: true in webpack.config.prod.js. However in this simple setup drop_console works and console.log is removed.
As it still didn't work in my real app I installed strip-loader:
npm install --save-dev strip-loader
then edited webpack.config.prod.js in node_modules\react-scripts\config (without ejecting from react):
var WebpackStrip = require('strip-loader'); // around line 20
...
// inserted in module/loaders between babel and style loaders, around line 168
{
test: /\.js$/,
loader: WebpackStrip.loader('debug', 'console.log')
},
Sure enough, all console.log statements were removed (npm run build). I then removed all my changes from the config and console.log were still being removed. I uninstalled strip-loader and the build still successfully removes console.log statements.
I cannot explain this behaviour, but at least it works (although somewhat magically).
I have followed the steps outlined in the VS Code documentation for getting Intellisense working for React Native by installing typings for React Native. Now, what do I need to do to get autocomplete working? For instance, if I type <Text>, I would like to see an automatic closing of that tag. What am I missing here? This seems like it shuld work out of the box.
To enable IntelliSense (autocomplete) you have to install the official React Native Tools extension.
Installation
Open Command Palette by pressing F1, type ext install and press Enter, then look for React Native Tools extension.
Create a jsconfig.json file
You should create a jsconfig.json file in you root directory. It can be empty but must be present. The presence of such a file in a directory indicates that the directory is the root of a JavaScript project.
(Optional)
The file itself can optionally list the files belonging to the project, the files to be excluded from the project, as well as compiler options.
{
"compilerOptions": {
"target": "ES6",
"module": "commonjs",
"allowSyntheticDefaultImports": true
},
"exclude": [
"node_modules"
]
}
You can find more at https://code.visualstudio.com/docs/languages/javascript#_javascript-projects-jsconfigjson
Create a .babelrc file for ReactNative Packger transformer (optional, if you want to use TypeScript)
You should create a .babelrc file with sourceMaps = true and "presets": [ "react-native" ] for better source-mapping support. (required if you want TypeScript support).
{
"presets": [
"react-native" // this is required for debugging with react-native/packager/transformer
],
"plugins": [],
"sourceMaps": true // must be true react-native/packager/transformer using with node-module-debug
// because of some bugs from vscode-node-debug & vscode-react-native, "sourceMaps" cannot be "inline" or "both"
}
Install typings for React Native (optional)
To get IntelliSense for React Native, run npm install typings -g and then typings install dt~react-native --global in your terminal.
Hope this helps!!
React Native Tools in VSCode can't help you close the Tag after you typed<Text>,you can try to install Auto Close Tag and Auto Rename Tag
In my case, I have to copy jsconfig.json to tsconfig.json, close Visual Code and reopen it. Then it works properly.
jsconfig.json
{
"compilerOptions": {
"allowSyntheticDefaultImports": true
},
"exclude": [
"node_modules"
]
}
tsconfig.json
{
"compilerOptions": {
"allowJs": true,
"allowSyntheticDefaultImports": true
},
"exclude": [
"node_modules"
]
}
I am also not getting any IntelliSense and also package auto-import is not working. Since I am not using Typescript, deleting the tsconfig.json helped me.
Take backup of your tsconfig.json file first
In my case, I've already installed many react-native extensions for autoSuggestion and another helper extension, e.g. "React Native Tools", and "React-Native/React/Redux snippets for es6/es7"
Issues:
autoSuggestion keywords not coming while typing.
command(in IOS) + click not letting me to jump on the target files.
Recently I have seen in VS Code editor for new React-native applications autoSuggestion not working.
Steps I have followed to solve:
Go to Extensions
Search for React or React-native
Remove the installed extension
Reload it.