vscode个人设置

// vscode的个人设置配置
{
"workbench.iconTheme": "vscode-icons",
"workbench.colorTheme": "Dracula Italics",
"vetur.format.defaultFormatter.js": "prettier",
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
"editor.quickSuggestions": {
"strings": true
},
"eslint.autoFixOnSave": true,
// "eslint.nodePath": "D:/develop/nvm/nodejs",
"editor.formatOnSave": true,
"editor.tabSize": 2,
"eslint.options": {
"plugins": [
"html"
],
"configFile": "项目目录下.eslintrc.js绝对路径"
},
"eslint.validate": [
"javascript",
"javascriptreact",
"html",
"vue",
{
"language": "vue",
"autoFix": true
},
{
"language": "html",
"autoFix": true
}
],
"prettier.disableLanguages": [
"vue",
"js"
],
"prettier.singleQuote": true,
"prettier.semi": false,
"prettier.stylelintIntegration": true,
} // eslintrc.js配置
module.exports = {
root: true,
// EsLint默认使用esprima做脚本解析,也可以切换他,比如切换成babel-eslint解析
parser: 'babel-eslint',
parserOptions: {
//指定来源的类型,有两种”script”或”module”
sourceType: 'module'
},
// Environment可以预设好的其他环境的全局变量,如brower、node环境变量、es6环境变量、mocha环境变量等
env: {
browser: true
},
// Extends是EsLint默认推荐的验证,你可以使用配置选择哪些校验是你所需要的,可以登录npmjs.com查看
extends: 'standard',
// required to lint *.vue files
plugins: ['vue', 'html'],
// add your custom rules here
rules: {
// allow async-await
'generator-star-spacing': 'off',
// 箭头函数的参数使用圆括号,0是关闭规则"off",1是警告"warn",2是报错"error"
'arrow-parens': 0,
// 强制 generator 函数中 * 号周围使用一致的空格
'generator-star-spacing': 0,
// 函数周围空格的设置
'space-before-function-paren': [
'error',
{
anonymous: 'never',
named: 'never',
asyncArrow: 'always'
}
],
// allow debugger during development
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
// 要求使用error对象作为promise拒绝的原因
'prefer-promise-reject-errors': 'off',
'padded-blocks': 0
}
}

vscode插件安装

  1. beautify 美化代码 好像没用到 安全起见先加上
  2. Bracket Pair Colorizer 美化括号 让你的括号看起来更好看
  3. Dracula theme 一个主题 随便装不装
  4. Dracula Theme with Italic keywords 刚才那个主题的配套设施,内容看起来是斜体,有点意思
  5. EditorConfig for Visual Studio Code 代码风格配置插件
  6. eslint 不多说 就装吧
  7. JavaScript standard style standard标准编码风格
  8. Path Intellisense 自动完善路径
  9. prettier 代码格式化
  10. veture vue大礼包
  11. vscode-icons 美化图标

需要的项目环境

  1. npm install eslint eslint-plugin-html babel-eslint eslint-plugin-vue eslint-config-standard eslint-friendly-formatter --save-dev
  2. npm install eslint-loader eslint-plugin-import eslint-plugin-node eslint-plugin-promise --save-dev
  3. 可以全局装 也可以项目装,不要全局安装和本地安装混合,那样在执行命令的时候全局容易找不到本地的配置,本地找不到全局的包
  4. node_modules/.bin/eslint --fix path/to/要eslint的文件 可以对文件进行eslint规则修复

参考文档

  1. eslint中文官网
  2. 语言检测配置说明博客
  3. eslint入门博客

工作中遇到的vscode配合eslint完成保存为eslint格式的更多相关文章

  1. 工作中遇到的问题--Hibernate一对多保存简化Service层代码

    在创建一方的entity是添加一个增加多方的方法: package com.sim.mfg.data.domain; import java.io.Serializable;import java.u ...

  2. Matlab中使用Java api画图图形并保存为jpeg格式

    直接上代码: close all; import java.io.*; import java.awt.*; import java.awt.image.BufferedImage; import j ...

  3. git 工作中常用命令(结合vscode学习git 命令)

    作为一名前端开发,大家在工作中常常使用什么开发工具呢,我觉得我首选的是vscode,他配合git使用起来非常方便. 工作中常用三个命令: git终端常使用: git add . git commit ...

  4. VSCode配合ESLint自动修复格式化

    开发Vue或者React的项目的时候,我们经常用到ESLint进行代码的校验,当代码出现不符合规范的格式的时候,ESLint会在控制台提示相关的异常信息. ESLint极大的提高了团队代码的一致性和规 ...

  5. 运维工作中sed常规操作命令梳理

    sed是一个流编辑器(stream editor),一个非交互式的行编辑器.它一次处理一行内容.处理时,把当前处理的行存储在临时缓冲区中,称为"模式空间",接着用sed命令处理缓冲 ...

  6. 工作中常用Git指令操作

    常用Git指令总结 前阵子有几天好不顺,可谓是喝水都呛着,更何况被Git给呛着了,还不轻,哈哈.所以打算总结一下自己在工作使用到Git相关的东西以及和大家探讨使用GIt的心得体会.于是,关于Git的的 ...

  7. 转摘Linux命令工作中常用总结

    Linux命令工作中常用总结   1. 搜索 在vi和vim中如果打开一个很大的文件,不容易找到对应的内容,可以使用自带的搜索关键字进行搜索定位: 在vi和vim界面中输入:"/" ...

  8. Linux 运维工作中的经典应用ansible(批量管理)Docker容器技术(环境的快速搭建)

    一 Ansible自动化运维工具 Python 在运维工作中的经典应用 ansible(批量管理操作) .安装ansible(需要bese epel 2种源) wget -O /etc/yum.rep ...

  9. Linux命令工作中常用总结

    1. 搜索 在vi和vim中如果打开一个很大的文件,不容易找到对应的内容,可以使用自带的搜索关键字进行搜索定位: 在vi和vim界面中输入:"/"(反斜杠),之后会出现一个输入框让 ...

随机推荐

  1. ios swift4之kvo的使用

    在swift4之前,使用kvo只需要继承NSObject 就可以了.但是swift4之后发生了变化,必须在class之前加入@objcMembers修饰,不然就没有效果了. 下面举个例子:如定义一个P ...

  2. Windows服务注意!

    安装不成功 报错,或者安装成功 不运行 ,要把引用的dll文件 放到obj \debug文件夹下

  3. Qt 学习之路 2(12):菜单栏、工具栏和状态栏

    Home / Qt 学习之路 2 / Qt 学习之路 2(12):菜单栏.工具栏和状态栏 Qt 学习之路 2(12):菜单栏.工具栏和状态栏  豆子  2012年9月10日  Qt 学习之路 2  2 ...

  4. 解决spring使用动态代理

    解决spring使用动态代理类型转换失败的问题--java.lang.ClassCastException: com.sun.proxy.$Proxy$ cannot be cast to ... 转 ...

  5. Vscode 隐藏 工作区中的目录

    { "files.exclude": { "**/.git": true, "**/.svn": true, "**/.hg&qu ...

  6. Java的JsonHelper

    <!-- https://mvnrepository.com/artifact/com.google.code.gson/gson --> <dependency> <g ...

  7. django 自带的验证功能

    django.contrib.auth提供了很多验证方法 authenticate(): 提供了用户认证,在自带的数据库表中验证用户名和密码,需要username和password两个关键字参数 如果 ...

  8. windows查看网络常用cmd命令

    一.ping 主要是测试本机TCP/IP协议配置正确性与当前网络现状.  ping命令的基本使用格式是: ping IP地址/主机名/域名 [-t] [-a] [-n count] [-l size] ...

  9. pip 安装库的时候使用豆瓣镜像 提升效率

    由于众所周知的原因,国内网络环境始终处于水深火热之中,python库的安装也不例外. 比如在安装 PyQt5-tools 的时候,网速奇慢无比. 好在国内有不少镜像服务源,以豆瓣为例,网速突飞猛进 使 ...

  10. Ubuntu14.04配置python接口,测试的小问题

    当遇到“ImportError:No module named google.protobuf.internal”(import enum_type_wrapper)的问题时候 solution: P ...