Editor config is still hard

Today I learned that configuring your code editor to lint and format code in a predictable way is still hard.

I use two editors frequently - Sublime Text and VS Code. Both are great. Both have plugins and their own settings. Today I was trying to update my environment for a Vue project in VS Code. I wanted the .vue files to be linted with ESLint, and for Prettier to handle the formatting. I was concentrating on how multiple attributes per line were being formatted on the <template> part.

After following some advice on Stack Overflow, which led me to an article on Medium, an issue on GitHub and a video by Wes Bos on YouTube. I got somewhere…but not where I want to be. I can not get this code:

<template>
  <div v-cloak id="app" class="w-100 mw8 center">
    <food-search
      :search-query="search.searchQuery"
      :search-branded="search.searchBranded"
      :loading="loading"
      @set-search-data="setSearchData"
    ></food-search>
    <search-results
      :food-list="foodList"
      :selected-id="selectedRawData.id"
      @retrieve="getDataForSelected"
    ></search-results>
    <nutrition-information
      :name="information.name"
      :nutrition="information.nutrition"
    ></nutrition-information>
  </div>
</template>

to format like this on save:

<template>
  <div
    v-cloak
    id="app"
    class="w-100 mw8 center"
  >
    <food-search
      :search-query="search.searchQuery"
      :search-branded="search.searchBranded"
      :loading="loading"
      @set-search-data="setSearchData"
    ></food-search>
    <search-results
      :food-list="foodList"
      :selected-id="selectedRawData.id"
      @retrieve="getDataForSelected"
    ></search-results>
    <nutrition-information
      :name="information.name"
      :nutrition="information.nutrition"
    ></nutrition-information>
  </div>
</template>

I will figure it out eventually, but this is often an element of development that can be overlooked - configuration and tooling.