工程实战-vue在vscode的环境配置

solocoder 发布于2019-08-21 18:22 / 1180人阅读

摘要：基础开发插件图标美化调试代码格式化代码格式化代码规范语法提示必备及相关技术栈语法提示文件高亮格式化编码支持自动闭合标签自动更改对应标签名自动补全路径本地项目管理右击在浏览器打开文件支持支持友好化配置基础设置设置设置设置设置设置配

1. vscode基础开发插件

vscode-icons 图标美化
Debugger for Chrome 调试

Beautify 代码格式化
Prettier 代码格式化
ESLint 代码规范
JavaScript (ES6) code snippets javascript语法提示

vetur vue必备
VueHelper vue及相关技术栈语法提示
Sass sass文件高亮&格式化
Stylus language stylus编码支持

Auto Close Tag 自动闭合标签
Auto Rename Tag 自动更改对应标签名
Path Autocomplete 自动补全路径

Git Lens 本地项目git管理
View in Browser 右击在浏览器打开文件
Markdown All in One markdown支持
Npm npm支持
Npm Intellisense npm友好化

2. 配置vscode settings.json

{
    // 基础设置
    "editor.tabSize": 2,
    "workbench.iconTheme": "vscode-icons",
    "workbench.startupEditor": "welcomePage",
    "editor.quickSuggestions": {
        "strings": true
    },
    
    // vue设置
    "emmet.syntaxProfiles": {
        "vue-html": "html",
        "vue": "html"
    },
    "files.associations": {
        "*.vue": "vue"
    },
    
    // vetur设置
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    "vetur.format.defaultFormatter.js": "vscode-typescript",
    
    // eslint设置
    "eslint.autoFixOnSave": true,
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        {
            "language": "html",
            "autoFix": true
        },
        {
            "language": "vue",
            "autoFix": true
        }
    ],
    
    // format设置
    "javascript.format.insertSpaceBeforeFunctionParenthesis": false,
    "prettier.singleQuote": true,
    "prettier.semi": false,
    "prettier.useTabs": true,
    
    // git设置
    "gitlens.advanced.messages": {
        "suppressCommitHasNoPreviousCommitWarning": false,
        "suppressCommitNotFoundWarning": false,
        "suppressFileNotUnderSourceControlWarning": false,
        "suppressGitVersionWarning": false,
        "suppressLineUncommittedWarning": false,
        "suppressNoRepositoryWarning": false,
        "suppressUpdateNotice": false,
        "suppressWelcomeNotice": true
    }
}

3. ESLint配置文件

（1）eslint --init 然后选择自己的代码风格（当然，上面的配置与选择项对应修改）
（2）按照cube-ui的代码风格设定（推荐）
工程中.eslintrc.js文件

module.exports = {
    root: true,
    parser: "babel-eslint",
    parserOptions: {
        sourceType: "module"
    },
    // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
    extends: "standard",
    // required to lint *.vue files
    plugins: [
        "html"
    ],
    // add your custom rules here
    "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,
        "no-tabs": 0,
        "space-before-function-paren": 0
    }
}

点击查看standard类型配置项
点击查看ESLint规则说明

云服务器 GPU云服务器阿里云服务器配置环境在哪里怎么在云主机上面配置网站环境怎么在阿里云上配置服务器环境环境变量的配置

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/90397.html

记自己一次vue基础实战：配置篇

摘要：前言记录自己从基础学习实战，初入发表文章，望各位大佬口下留情不对之处还请大佬指点一下。在加载完后，你自己默认的浏览器自动打开配置界面新建项目。 1. 前言记录自己从基础学习vue实战，初入发表文章，望各位大佬口下留情！不对之处还请大佬指点一下。 2. 新建，配置项目 1. 新建Vue-cli3.0脚手架的项目在这里普及一下，什么是Vue-cli？ Vue是一套用于构建用户界面的渐...

NoraXie 2019-08-02 15:34 评论0 收藏0
记自己一次vue基础实战：配置篇

摘要：前言记录自己从基础学习实战，初入发表文章，望各位大佬口下留情不对之处还请大佬指点一下。在加载完后，你自己默认的浏览器自动打开配置界面新建项目。 1. 前言记录自己从基础学习vue实战，初入发表文章，望各位大佬口下留情！不对之处还请大佬指点一下。 2. 新建，配置项目 1. 新建Vue-cli3.0脚手架的项目在这里普及一下，什么是Vue-cli？ Vue是一套用于构建用户界面的渐...

SmallBoyO 2019-08-26 10:16 评论0 收藏0
小光光谈前端

摘要：这个问题应该是百度或者知乎都能知道答案的，以上是自己亲身学习的一些途径方便少走一点弯路入门。问题1：前端的学习路线基础的html，css，js，推荐慕课网免费课程:前端工程师路径,极客学院免费课程:前端工程师路径大概刷过就可以了，不用死记硬背某个知识点，css跟js还需要加深学习的，在实战过程中不懂就去查文档基础的ps切图能力慕课网ps基础课程拥有自己的虚拟主机传送...

canopus4u 2019-08-29 16:10 评论0 收藏0
小光光谈前端

摘要：这个问题应该是百度或者知乎都能知道答案的，以上是自己亲身学习的一些途径方便少走一点弯路入门。问题1：前端的学习路线基础的html，css，js，推荐慕课网免费课程:前端工程师路径,极客学院免费课程:前端工程师路径大概刷过就可以了，不用死记硬背某个知识点，css跟js还需要加深学习的，在实战过程中不懂就去查文档基础的ps切图能力慕课网ps基础课程拥有自己的虚拟主机传送...

shiguibiao 2019-08-23 10:26 评论0 收藏0