I'm using Visual Studio to build a React Native app. I also installed Prettier to improve the syntax.
But every time I add a component with several property it goes to the next line. How could I prevent that and keep my component inline?
PS: I already tried to increase the "print width" in Prettier and it doesn't work
You should check jsx-max-props-per-line eslint rule.
You can only set that rule using ESlint, prettier doesn't give you that option.
So, what you need to do is use eslint with prettier and prettier will format looking at your eslint rules.
Go to File => Preferences => Settings and in the Prettier extension, mark Eslint Integration.
You will need to npm i -D for babel-eslint, eslint and eslint-plugin-react (wich have the rule you want).
And add the rule of jsx-max-props-per-line with the number of props you want to be inline.
If you have problem configuring ESlint, just google how to add ESlint with React Native, there is alot of tutorials and it's a very important and usefull thing to learn.
Related
I work in eclipse on windows.
I have a workspace containing several projects, one of which contains typescript and sass (scss) files. I had a working build chain that produced a solid output of CSS and JS files. However I created this a while back, and I never really liked the way it was set up to begin with. Now external circumstances force me to rethink this chain, and I want to rebuild it more robust.
I previously used webpack via nodejs, triggered from a package.json from inside eclipse.
I don't like this, because I dislike the idea of a build chain that depends on an ecosystem, which is difficult to upgrade safely (without a clear strategy of reverting to a stable state, in case of failure or incompatibility). This is exactly what happened to me, and why I want to leave this setup.
What I would like to have is a:
fixed version of a (preferably more atomic) transpiler that I can try to upgrade/update manually, but always know to have the old version to fall back on.
less 'messy' chain, with as few individual pieces as possible.
still maintained solution.
What I had in mind was a Maven based chain, but those approaches always seems to rely on other tools, which in turn use nodejs. I'd rather use a separate build chain to build SASS, and have a robust typescript build chain in trade.
The official TypeScript compiler is the only TypeScript compiler that provides type checking. It's a Node.js program.
Babel and some similar tools can also transpile TypeScript into JavaScript but all they do is to strip type annotations (after all TypeScript syntax is just JavaScript + some modern ECMAScript features + type annotations). It's very useful and fast for production builds but basically defeats the purpose of using TypeScript in the first place, which is presumably type checking. Besides, all of the tools of this type that I'm aware of are also Node.js programs.
What this means is that you're already going to need Node.js for the compiler itself.
Coming from mainly C/C++ programming I also disliked the idiosyncrasy of JS build tools and tried hard to avoid them. But it is what it is: You're on your own if you want to use tools like make, maven, or similar. It is also slower. TypeScript (or Babel) compiler is an in process plugin for Webpack, but it's gonna be an external command if you use a generic build system. This adds overhead and causes the compilers to do some extra work in some settings. Finally, extremely useful Webpack features like the watch mode and the dev server are not easily implementable with a traditional build system.
Besides, I don't think your objections are warranted: It is, in fact, very easy to revert an npm package to a stable state if you use version control (which you should be doing anyway) and a package-lock.json file. Then it's a simple matter of git checkout stable-branch && npm ci. Here, ci stands for "clean install" and it installs all the packages with the version numbers in package-lock.json. You can even install a checkout hook that runs npm ci when there are changes in the package-lock.json (which you should commit to your version control system).
This way, everyone in your team and every build of your application (be it your local development version, your colleagues' development versions, staging servers, or production server, or whatever) will have the exact same npm packages for a given git commit (or equivalent thereof in other version control systems).
How can I disable the VSCode from generating vendor prefixed style properties when trying to tab in a property without vendor prefixes added? I don't need the vendor prefixes as my post-css post processing for Sass handles this already.
Thanks.
The behavior you describe, as far as I understand it, is not the default behavior of VScode. In SCSS/SASS syntax modes, there is no vendor prefix autocomplete. This is most likely caused by an additional code snippet plugin for the language or a CSS autoprefix plugin.
I recommend disabling all SCSS/SASS-related plugins, then checking if those vendor prefixes still show up. It is very likely that they do not. You should then re-enable the disabled plugins one by one until you hit the culprit. Just leave the conflicting plugin disabled or remove it and you should be set.
When you are starting with a hyphen, you are triggering auto completion as expected. There is very little you can do about it because this is expected behavior.
To get the behavior you strive for, there's really only two alternatives:
Ask the plugin author to make vendor prefix completion optional, behind a user setting.
Fork the plugin, change the respective source code by deleting the completions you don't want, build it and replace the upstream version with your version in VScode. You can easily install plugins from local .vsix plugin package files.
Update: Just to make things easier for you, I have gone ahead, stripped all vendor prefixes and packaged the plugin. You can download it here: https://github.com/herrbischoff/vscode-sass-indented-stripped
I am using ASP.Net Core, Angular2 and Typescript and connected all together with webpack using the tutorial from Angular2 team here. That all seems to work but now I need to build each time I change a file.
Original tutorial uses system.js and that loads tons of files of course, but I just use static file middleware and no build is required for development. That is very convinient, but I cannot figure out how to do the same with webpack. It seems that webpack can only bundle everything together without an option to just load everything separately so I need to run the build each time.
Is it possible to do something so that webpack "expands" the bundle in some easy way?
P.S. I would like not to use webpack dev server and some auto-build on save and so on since the complexity is rather high alredy. So ideal solution is that I have bundles for production but direct code loaded for development like in good old days with standard mvc bundling.
Really, the best way would be to use webpack dev server. There's really not much setup involved, it's just a different command you run instead of webpack:
npm install webpack-dev-server
webpack-dev-server webpack.config.js
Then you just point script sources to http://localhost:8080/webpack-dev-server/your-bundle-name.js" in your application` tags.
This is by far the best option as you get instant incremental recompile and live-reload.
While I would strongly encourage you to use webpack-dev-server you can also just use plain webpack in watch mode:
webpack ---watch
There is no way to "expand the bundle" (and really no need to). In all likelyhood you are using webapack for more than just bundling, so you'd still require to re-build if you change a typescript file, for example. Webpack dev server or webpack in watch mode do very quick incremental compiles, and most people will just leave them running while developing.
I have created an Ionic 2 beta app and when I open it in Visual Studio (VS) 2015 I get syntax errors inside all of the .js files for the #Page decorator and the contructor () { }. Being new to Ionic 2 I'm unsure if the error is related to TypeScript, Ionic, Angular, or VS just being a pain.
Here's an example screenshot of the tabs.js file...
Could anybody explain why I get these syntax errors and what I can do to resolve them?
This answer has been updated with (hopefully) a better explanation
After some online reading I've realised this is not a code breaking problem but more of an inconvenience as a developer seeing these errors on the screen.
Why does it happen?
Visual Studio (and possibly other IDE's) classes certain characters as invalid for .js files. Angular 2 and Ionic 2 reserve some of these characters (such as #) for special purposes, for example using #Page will tell Ionic to create a new navigation component so that it can be used with NavController.
Solution
Ionic give you the choice to create an application in JavaScript or TypeScript. If you prefer to use JavaScript you will just have to put up with these visual errors because the application will still run and work as expected (as far as I'm aware).
Or
You can use TypeScript. TypeScript will accept these characters which means these errors are no more. The only downside is you will need to learn TypeScript, but this becomes a good thing IMO. To create a TypeScript project just add --ts at the end of the CLI command, for example ionic start testApp --v2 --ts
I'll leave this here in case anybody else experiences a similar problem and may find this information useful.
I am a new Cloud9 (c9.io) user and I spent the morning searching the web, but cant seem to find an answer on what needs to be done for Cloud9 to recognize me lint config files. They are currently in my workspace/project root, but none of the rules (like, 80 character line max, etc...) are being enforced by the editor. It seems to do some basic linting that I have limited control over... but for javascript development I really need more for my team.
Thanks,
Eric
Currently the Cloud9 IDE uses ESLint for linting purposes within the editor, but doesn't read configuration from .eslintrc files within the project yet.
There should be .eslintrc parsing support by now in c9 given this patch: https://github.com/c9/c9.ide.language.javascript.eslint/commit/c77d2241d140512b9f807d597e0ccca70bbd8a20
On Cloud9 hosted workspaces, .jslintrc is working. I have just added my own rules after reading this post and it was working well.
It seems to be sufficient to set the rules, that should be changed from the default linting configuration in c9.
Wanted to make a comment to answer above, but too low on reputation :(
Seems like eslint config in package.json files (using eslintConfig field) is not handled (yet).