美文网首页
vscode编辑器使用

vscode编辑器使用

作者: 唯轩_443e | 来源:发表于2018-09-03 10:19 被阅读0次

推荐插件

Chinese (Simplified) Language Pack for Visual Studio Code (中文包 安装即可)
vscode-icons 图标美化
Debugger for Chrome 调试

Beautify 代码格式化
ESLint 代码规范
JavaScript (ES6) code snippets javascript语法提示
view in browser   (在浏览器打开html文件)

Sass sass文件高亮&格式化
Easy Sass (转义Sass为css)
HTML Snippet (HTML语法扩展 安装即可)
TypeScript Importer (import等引入文件时智能提示 安装即可)
VSCode Great Icons  (文件图标)

vetur vue必备
VueHelper vue及相关技术栈语法提示

Auto Close Tag 自动闭合标签
Path Autocomplete 自动补全路径

Markdown All in One markdown支持

使用ESLint

  1. 打开 Visual Studio Code,快捷键 Ctrl + Shift + P 调出VsCode的控制台
    输入命令 ext install ESLint安装ESLint插件

  2. 打开cmd跳转node安装目录文件夹,输入npm install eslint -g 全局安装esLint

  3. cmd进入项目文件夹输入npm init,然后输入eslint --init

  4. 问题:1 您想如何配置EsLIt?
    使用流行风格指南(Use a popular style guide) -- Y
    回答有关你的风格的问题(Answer questions about your style)
    检查你的JavaScript文件( Inspect your JavaScript file(s))
    问题:2 你想遵循什么样的风格指南?
    Airbnb (https://github.com/airbnb/javascript)
    Standard (https://github.com/standard/standard)标准 -- Y
    Google (https://github.com/google/eslint-config-google)谷歌
    问题:3 您希望配置文件处于什么格式?
    JavaScript
    YAML
    JSON -- Y
    问题: 4 您想用NPM安装它们吗?(y/n) y
    // 安装完毕: eslintrc.json

// eslintrc.json
{
    "extends": "standard",
    "rules": {
        "no-console": "off",
        "generator-star-spacing": "off",
        "space-before-function-paren": [
            0,
            "always"
        ],
        "eol-last": 0,
        "no-unused-vars": [
            0,
            {
                "vars": "all",
                "args": "after-used"
            }
        ],
        "semi": [
            0,
            "always"
        ],
        "no-sequences": 0,
        "no-trailing-spaces": 0,
        "no-unexpected-multiline": 0,
        "prefer-promise-reject-errors": 0,
        "one-var": 0,
        "no-useless-return": 0,
        "no-extend-native": 0,
        "node": 0,
        "valid-typeof": 0,
        "indent": 0,
        "no-multi-spaces": 0
    }
}

快捷方式、

  1. 新建index.htm 然后输入!,然后按Tab,可快速生成html模板

使用Sass

  1. 下载安装Ruby
  2. 安装好ruby以后,打开cmd,输入gem install sass`安装SASS
  3. 扩展里搜索Sass(智能提示) 并安装
  4. 扩展里搜索Easy Sass(转义sass为css) 并安装
  5. 打开配置搜索easysass
    image.png
{
/*  设置编译输出的 css 风格
     format参数:
     nested:嵌套缩进的 css 代码。
   expanded:没有缩进的、扩展的css代码。
   compact:简洁格式的 css 代码。
   compressed:压缩后的 css 代码。
*/
    "easysass.formats": [
        {
            "format": "compressed",  // 压缩
            "extension": ".min.css"   // 输出的文件名
        }
    ],
    "easysass.targetDir": "./src/css/",  // 自定义css输出文件路径(当前打开目录的路径)
}

使用VSCode Great Icons

安装并启用后,文件 > 首选项 > 文件图标主题 > VSCode Great Icons

相关文章

  • 前端搭建本地服务

    1.前端使用vscode编辑器,安装live serve插件 然后在vscode编辑器的右下角有 Go live ...

  • 前端搭建本地服务器

    方法一: 前端使用vscode编辑器,安装live serve插件然后在vscode编辑器的右下角有 Go liv...

  • vscode插件开发教程

    1.概览 1.1 vscode插件可以做什么 vscode编辑器是可高度自定义的,我们使用vscode插件几乎可以...

  • 前端编辑器vscode常用插件

    说起vscode编辑器,是每个前端必备的文本编辑器之一,下面列举下常用的插件名称。方便大家使用vscode编码时更...

  • VSCode 安装中文插件

    VSCode 是一款开源的跨平台编辑器。默认情况下,vscode使用的语言为英文(en) 1)打开vscode工具...

  • (1)Win10+TeXLive2018+VSCode+LaTe

    Windows和Linux都能使用TeXLive和VSCode,VSCode是一个非常好用的编辑器 TeXLive...

  • VSCode设置中文语言显示

    VSCode设置中文语言显示 Vscode是一款开源的跨平台编辑器。默认情况下,vscode使用的语言为英文(us...

  • VSCode 汉化方法

    Visual Studio Code(Vscode)是一款开源的跨平台编辑器。默认情况下,vscode使用的语言为...

  • Flutter入门02----Dart语法

    VSCode环境搭建 在学习Dart语法时,本人使用的是VSCode编辑器,下载官方网址为:https://cod...

  • 从0开发一个大玩具(一)

    技术选型 著名的编辑器vscode相信大家都知道vscode是使用electron+web的形式来开发打开vsco...

网友评论

      本文标题:vscode编辑器使用

      本文链接:https://www.haomeiwen.com/subject/azfewftx.html