![]() Vetur handles figuring out how to format these complicated files known as Vue SFC’s. This is important in a VueJS application since usually we’re mixing HTML that uses Vue’s templating engine, JavaScript and sometimes CSS too depending on how loony you are □. Now Vetur, among many other features, has formatting built-in. Place the key on real elements instead.eslint(vue/no-template-key) just like we saw in the command line before! □□ Format The Code If you hover over any of the red lines you should see the text: '' cannot be keyed. Please excuse the fact that I renamed HelloWorld.vue to Hello.vue - thanks! Hopefully at this point you’re seeing a ton of red lines! If not, let me know in the comments and I’ll try to help you out. Now go ahead and add that key attribute back to your template tag in HelloWorld.vue (Yeah I read that “Boromir” in my head to □). Next you’ll want to install the ESLint plugin by Dirk Baeumer. Now search for “vetur” and scroll all the way down to the bottom and make sure you check all the “validation” options like this: Open your VS Code settings with ctr +, or cmd +. The command will still be super useful for Continuous Integration but we’re humans, not machines! Get Linting Errors To Show In VS CodeĬhances are, if you’re using VueJS you probably already have this plugin installed, but just incase, go install Vetur now! It’s the one with 5M+ installs… Not bad… but it would be way cooler to see the feedback directly inside our IDE without having to worry about running that command in our terminal. Now this is really cool! We can catch common mistakes and errors in our code by running a single command and fix them before they go into production - hoozah! ☄□♂️ If you change it to plugin:vue/recommended you’ll get close to 80% of the rules available. The essential extension is the loosest of them all. ![]() ![]() You can see a full list of rules and extend options here: That’s where the no-template-key rule is coming from. You should see a section called extends and the first item in the array will be plugin:vue/essential. This is set inside the package.json file under eslintConfig. If you remove the key and run yarn lint again you’ll see a clean run! This happens because one of the default rules configured from the CLI is no-template-key, an example of a code quality rule. Place the key on real elements instead (vue/no-template-key) at src/components/Hello.vue:1:1: If you run the command npm run lint or yarn lint you should see an error with the text: error: '' cannot be keyed. Just incase at the time of reading there are newer versions of the CLI scaffold your project like this: If you’d like to see a more in-depth tutorial explaining how to set this all up from scratch, let me know in the comments below! ![]() This will get us 90% of the way to having everything we need so it makes sense to just do this. □ Initial Set Upįor this tutorial we’re going to use the Vue CLI to scaffold our VueJS project. This means we need to set them both up to handle what they’re strongest at. ![]() None-the-less it’s important to categorize the two as separate concerns, since the tools we’re going to be configuring need to play together nicely. This line drawn between code style and code quality can also be blurry since arguably having consistent style is a part of having good code quality. ESLint, for example, has plenty of rules that are just code style related. Linters usually have some overlap with formatters. Like whether you should include a semi-colon at the end of a statement (the answer is NO obviously □), or if indentations should be 2 spaces or 4. Linting rules are designed to catch common gotchas or code smells □ and are intended to help developers prevent them from happening in their code bases □.įormatters on the other hand, are concerned with code style. Having a rule setup that disallows empty functions is an example of a check for code quality. Linters are primarily concerned with code quality. First, it’s important we understand the difference between linting and formatting. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |