无需使用vue-cli，如何在.js文件中实现Vue代码补全与语法高亮？

Hey there! I totally get where you're coming from—working with Vue via plain <script> tags instead of single-file components can make your editor feel like it's ignoring all that Vue-specific code. Let's walk through practical fixes to get proper syntax highlighting and code completion up and running in Sublime Text.

1. Install a Vue-Focused Syntax Highlight Plugin #

First, grab a plugin that understands Vue syntax even outside .vue files. The most reliable one is Vue Syntax Highlight:

• Open Sublime Text, bring up Package Control (Ctrl+Shift+P on Windows/Linux, Cmd+Shift+P on Mac).
• Search for Install Package, then look for Vue Syntax Highlight and install it.

Once installed, you can manually switch the syntax for your .js file:

• Open your myVue.js file.
• Look at the bottom-right corner of Sublime—you'll see the current syntax (e.g., "JavaScript"). Click it, then select Vue from the list.

Set Default Syntax for Your Vue .js Files #

To avoid switching manually every time, add a rule to your Sublime User Settings:

• Open User Settings (Preferences > Settings).
• Add this to the right pane (your custom settings):

  {
    "file_associations": [
      {
        "pattern": "myVue.js",
        "syntax": "Vue/Vue.tmLanguage"
      }
    ]
  }
  

This tells Sublime to always use Vue syntax for your myVue.js file. If you want all .js files that contain Vue code to get this treatment, you can use a broader pattern like "*.vue.js" (just rename your file to myVue.vue.js for consistency).

2. Add Vue Code Completion Support #

For code completion (like auto-suggesting Vue instance options, directives, etc.), install Vue Complete Package:

• Again, use Package Control to search for and install Vue Complete Package.
• After installation, restart Sublime. The plugin should now recognize Vue code in your .js files (especially if you've set the syntax to Vue as above) and offer relevant completions as you type—try typing new Vue( and you should see suggestions for el, data, methods, and more.

3. Quick Hack: Comment Trigger for Syntax Switch #

If you don't want to change the file's default syntax globally, you can add a special comment at the top of your .js file to tell Sublime to use Vue syntax for that file:

/* vue */
// Your Vue code starts here
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

Most Vue syntax plugins will pick up this comment and switch the highlighting automatically.

4. Custom Syntax (Advanced) #

If the above options don't cover your needs, you can create a custom syntax definition that mixes JavaScript and Vue. This is more work, but gives you full control:

• Create a new .tmLanguage file in Sublime's Packages/User directory.
• Define syntax rules that combine JavaScript with Vue-specific patterns (like directives, template syntax if you're writing templates in strings).
• Associate your .js files with this custom syntax via user settings.

This is best for power users who need tailored support for their specific workflow.

内容的提问来源于stack exchange，提问作者Daniel Stiefel