Visual Studio Code的使用

一．常用插件

Vetur
该插件是vue文件基本语法的高亮插件，在插件窗口中输入vetur点击安装插件就行，装好后点击文件->首选项->设置打开设置界面，在设置界面右侧添加配置。
包含格式化功能， Alt+Shift+F （格式化全文），Ctrl+K Ctrl+F（格式化选中代码，两个Ctrl需要同时按着）。

"emmet.syntaxProfiles": {
  "vue-html": "html",
  "vue": "html"
}

Eslint
eslint智能错误检测插件，在具体开发中作用很大，能够及时的帮我们发现错误。至于安装，同样打开插件扩展窗口输入eslint点击安装插件，装好后也需要进行配置，在同vetur插件一样的地方进行配置

"eslint.validate": [
        "javascript",
        "javascriptreact",
        {
            "language": "html",
            "autoFix": true // HTML自动修复，
        },
        {
            "language": "vue",
            "autoFix": true // vue 自动修复
        }
    ],
    "eslint.autoFixOnSave": true // 文件保存时自动修复

Path Intellisense
作用：路径自动填充
Git相关

扩展安装
其他

HTML CSS Support css语法提示
HTML Snippets html标签提示

JavaScript (ES6) snippets ES6语法快捷键支持

language-stylus stylus语法提示
Stylus stylus CSS语法提示-->主要支持vue文件下stylus

VS Color Picker color: #fff 自动提示

Vue 2 Snippets vue快捷键提示
VueHelper

vscode-icons 图标
Debugger for Chrome 将断点映射至chrome上
Markdown All in One
Open in Browser
AL Code Outline

主题：theme-Protectivecoloration
Atom One dark theme
Atom One Light theme
Macaroon theme
Massimo-theme
Parasol Theme

二．VS Code 升级新版版后，默认仅仅支持英文

下载语言包插件输入“Chinese” ，安装插件 “Chinese (Simplified) Language Pack for Visual Studio Code”
Ctrl +Shift +P快捷键输入 “Configure Language” 配置本地语言
将local的值，设置为中文简体“zh-cn”

locale.json

三．Vue3.0的开发环境

安装node.js最新版
这里安装的是8.11.4版

node.js的版本

更新npm至最新版
安装node.js后， npm默认版本为： 6.1.0

版本

使用npm install npm -g更新npm至最新版

更新

安装vs code

安装过程就忽略了.
安装@vue/cli

npm install -g @vue/cli

安装情况

创建一个vue-demo-project工程
创建过程中默认配置（开箱即用）

新建工程

新建结果

打开工程

打开结果

默认情况下， VS code是使用英文的，有需要的话，大家也可自行修改为中文：

1.按下ctrl+p, 输入: > Config, 选择： “Configure Display Language"

配置界面

将原先的：

配置

修改为：

配置

修改并保存后，会提示安装语言包，安装即可：
打开一个.vue的文件时，会提示推荐安装vetur插件，当然选择安装了。安装成功后，会提示重启vscode

结果

Vetur支持.vue文件的语法高亮显示，除了支持template模板以外，还支持大多数主流的前端开发脚本和插件，比如Sass和TypeScript等等
eslint
此时打开一个vue文件并编辑，保存时并不会自动进行格式化，这里还需要安装一些依赖和一些配置。
首先需要安装eslint

npm install -g eslint

安装

安装vscode 插件eslint
安装好vscode插件后，执行vscode如下命令：

配置

此时会在终端执行以下命令，并按提示进行选择：

d:\Project\vue-demo-project>node_modules.bin\eslint.cmd --init
? How would you like to configure ESLint? Answer questions about your style
? Which version of ECMAScript do you use? ES2015
? Are you using ES6 modules? Yes
? Where will your code run? Browser
? Do you use CommonJS? Yes
? Do you use JSX? Yes
? Do you use React? Yes
? What style of indentation do you use? Tabs
? What quotes do you use for strings? Double
? What line endings do you use? Windows
? Do you require semicolons? No
? What format do you want your config file to be in? JSON
The config that you've selected requires the following dependencies:
eslint-plugin-react@latest
Successfully created .eslintrc.json file in d:\Project\vue-demo-project
d:\Project\vue-demo-project>

完成以上动作后，会在当前工程目录下生成一个 .eslintrc.json文件
vs code中配置eslint保存时自动格式化
具体配置如下：

{
    "files.autoSave": "off",
    "files.autoSaveDelay": 1000,
    "team.showWelcomeMessage": false,
    "emmet.syntaxProfiles": {
      "vue-html": "html",
      "vue": "html"
    },
    
    "eslint.autoFixOnSave": true,
    "eslint.validate": [
        "javascript",{
            "language": "vue",
            "autoFix": true
        },    
      "javascriptreact",
      "html",
      "vue"
  ],
  "eslint.options": {
      "plugins": ["html"]
  },
     //为了符合eslint的两个空格间隔原则
    "editor.tabSize": 2,
    "eslint.enable": true
}

eslint相关问题

eslint未生效
查看并检查下eslint server是否启动或报错
若有出错，一般会给出提示，按提示处理就好了。
报错： Expected linebreaks to be 'CRLF' but found 'LF'. (linebreak-style)
有时会出现报错信息： Expected linebreaks to be 'CRLF' but found 'LF'. (linebreak-style)
不同的操作系统下，甚至是不同编辑器，不同工具处理过的文件可能都会导致换行符的改变。
如果实在找不出原因，或者无法解决，可以先关闭此项检测。
// 统一换行符，"\n" unix(for LF) and "\r\n" for windows(CRLF)，默认unix
// off或0: 禁用规则
'linebreak-style': 'off'
使用vue/cli 3.0 自定义配置项创建工程后, vscode中eslint无法自动修复格式的问题
原因: .eslintrc.js文件中缺少了配置, 如下图所示, 添加右侧红框部分后, 添加依赖eslint-plugin-html后即可.
附上.eslintrc.js详细备注

module.exports = {
    // 默认情况下，ESLint会在所有父级组件中寻找配置文件，一直到根目录。ESLint一旦发现配置文件中有   "root": true，它就会停止在父级目录中寻找。
    root: true,
    // 对Babel解析器的包装使其与 ESLint 兼容。
    parser: 'babel-eslint',
    parserOptions: {
        // 代码是 ECMAScript 模块
        sourceType: 'module'
    },
    env: {
        // 预定义的全局变量，这里是浏览器环境
        browser: true,
    },
    // 扩展一个流行的风格指南，即 eslint-config-standard
    // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
    extends: 'standard',
    // required to lint *.vue files
    plugins: [
        // 此插件用来识别.html 和 .vue文件中的js代码
        'html',
        // standard风格的依赖包
        "standard",
        // standard风格的依赖包
        "promise"
    ],
    //配置的一些规则
    'rules': {
    // allow paren-less arrow functions
    'arrow-parens': 0,
    // allow async-await
    'generator-star-spacing': 0,
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
    }
}

最终的.eslintrc.json文件内容如下

{
    "env": {
        "browser": true,
        "commonjs": true,
        "es6": true
    },
    "extends": "eslint:recommended",
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 2018,
        "sourceType": "module"
    },
    "plugins": [
        "react"
    ],
    "rules": {
        "indent": [
            "error",
            "tab"
        ],
        "linebreak-style": "off",
        "quotes": [
            "error",
            "double"
        ],
        "semi": [
            "error",
            "never"
        ]
    }
}

Visual Studio Code的使用

一． 常用插件

二．VS Code 升级新版版后，默认仅仅支持英文

三．Vue3.0的开发环境

1.按下ctrl+p, 输入: > Config, 选择： “Configure Display Language"

你可能感兴趣的:(Visual Studio Code的使用)

一．常用插件