diff --git a/lib/potassium/assets/.vscode/extensions.json b/lib/potassium/assets/.vscode/extensions.json
new file mode 100644
index 00000000..25719f7d
--- /dev/null
+++ b/lib/potassium/assets/.vscode/extensions.json
@@ -0,0 +1,15 @@
+{
+  // See https://go.microsoft.com/fwlink/?LinkId=827846 to learn about workspace recommendations.
+  // Extension identifier format: ${publisher}.${name}. Example: vscode.csharp
+  // List of extensions which should be recommended for users of this workspace.
+  "recommendations": [
+    "Vue.volar",
+    "dbaeumer.vscode-eslint",
+    "bradlc.vscode-tailwindcss",
+    "EditorConfig.EditorConfig",
+  ],
+  // List of extensions recommended by VS Code that should not be recommended for users of this workspace.
+  "unwantedRecommendations": [
+    "octref.vetur"
+  ]
+}
diff --git a/lib/potassium/assets/.vscode/recommended-settings.json b/lib/potassium/assets/.vscode/recommended-settings.json
new file mode 100644
index 00000000..bafad0ef
--- /dev/null
+++ b/lib/potassium/assets/.vscode/recommended-settings.json
@@ -0,0 +1,22 @@
+{
+    "[ruby]": {
+        "editor.rulers": [
+            100
+        ]
+    },
+    "[vue]": {
+        "editor.rulers": [
+            120
+        ]
+    },
+    "[javascript]": {
+        "editor.rulers": [
+            120
+        ]
+    },
+    "[typescript]": {
+        "editor.rulers": [
+            120
+        ]
+    }
+}
diff --git a/lib/potassium/assets/README.yml b/lib/potassium/assets/README.yml
index 85024fae..38fb8d22 100644
--- a/lib/potassium/assets/README.yml
+++ b/lib/potassium/assets/README.yml
@@ -83,6 +83,16 @@ readme:
         You can add or modify rules by editing the [`.rubocop.yml`](.rubocop.yml), [`.eslintrc.json`](.eslintrc.json) or [`.stylelintrc.json`](.stylelintrc.json) files.
 
         You can (and should) use linter integrations for your text editor of choice, using the project's configuration.
+    vscode:
+      title: VSCode Configuration
+      body: |
+        To use the recommended configurations follow the steps below:
+
+            install the recommended extensions in .vscode/extensions.json
+            copy (or link) .vscode/recommended-settings.json to .vscode/settings.json
+            restart the editor
+
+        To see the recommended extensions select "Extensions: Show Recommended Extensions" in the Command Palette.
     mailing:
       title: "Sending Emails"
       body: |
diff --git a/lib/potassium/recipes/editorconfig.rb b/lib/potassium/recipes/editorconfig.rb
index 9bb64add..8ec092f8 100644
--- a/lib/potassium/recipes/editorconfig.rb
+++ b/lib/potassium/recipes/editorconfig.rb
@@ -1,5 +1,8 @@
 class Recipes::Editorconfig < Rails::AppBuilder
   def create
     copy_file '../assets/.editorconfig', '.editorconfig'
+    copy_file '../assets/.vscode/recommended-settings.json', '.vscode/recommended-settings.json'
+    copy_file '../assets/.vscode/extensions.json', '.vscode/extensions.json'
+    add_readme_section :vscode
   end
 end
diff --git a/spec/features/editorconfig_spec.rb b/spec/features/editorconfig_spec.rb
new file mode 100644
index 00000000..34c1e416
--- /dev/null
+++ b/spec/features/editorconfig_spec.rb
@@ -0,0 +1,24 @@
+require "spec_helper"
+
+RSpec.describe "EditorConfig" do
+  let(:conf_files) do
+    %w{
+      recommended-settings.json
+      extensions.json
+    }
+  end
+
+  before(:all) do
+    drop_dummy_database
+    remove_project_directory
+    create_dummy_project
+  end
+
+  it { expect(File.exist?("#{project_path}/.editorconfig")).to be true }
+  it { expect(Dir.entries("#{project_path}/.vscode")).to include(*conf_files) }
+
+  it "adds the vscode brief to README file" do
+    readme = IO.read("#{project_path}/README.md")
+    expect(readme).to include("VSCode Configuration")
+  end
+end