vuevue 学习

基于Visual Studio Code搭建Vue开发环境

2018-08-28  本文已影响1594人  HelloJames

安装node.js最新版

这里安装的是8.11.4

image.png

更新npm至最新版

安装node.js后, npm默认版本为: 6.1.0

image.png
使用npm install npm -g更新npm至最新版
image.png

安装vs code

安装过程就忽略了.

安装@vue/cli

> npm install -g @vue/cli

image.png

创建一个vue-demo-project工程

创建过程中默认配置(开箱即用)


image.png
image.png

打开工程

image.png

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

  1. 按下ctrl+p, 输入: > Config, 选择: “Configure Display Language"
    image.png
  2. 将原先的:


    image.png

    修改为:


    image.png

修改并保存后, 会提示安装语言包, 安装即可:

打开一个.vue的文件时, 会提示推荐安装vetur插件, 当然选择安装了。安装成功后,会提示重启vscode

image.png

Vetur支持.vue文件的语法高亮显示,除了支持template模板以外,还支持大多数主流的前端开发脚本和插件,比如Sass和TypeScript等等

eslint

此时打开一个vue文件并编辑, 保存时并不会自动进行格式化, 这里还需要安装一些依赖和一些配置。


image.png

首先需要安装eslint

> npm install -g eslint

image.png

安装vscode 插件eslint

安装好vscode插件后, 执行vscode如下命令:


image.png

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

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相关问题

1. eslint未生效

查看并检查下eslint server是否启动或报错


image.png

若有出错, 一般会给出提示, 按提示处理就好了。

2. 报错: 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'

最终的.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"
        ]
    }
}

更多好文:

上一篇下一篇

猜你喜欢

热点阅读