eslint prettier vetur eslint
VScode (版本 1.47.3)安装 eslint
prettier
vetur
插件 .vue
文件使用 vetur 进行格式化
在文件 .prettierrc
里写 属于你的 pettier 规则
- {
- "printWidth": 120,
- "tabWidth": 2,
- "singleQuote": true,
- "trailingComma": "none",
- "semi": false,
- "wrap_line_length": 120,
- "wrap_attributes": "auto",
- "proseWrap": "always",
- "arrowParens": "avoid",
- "bracketSpacing": false,
- "jsxBracketSameLine": true,
- "useTabs": false,
- "overrides": [{
- "files": ".prettierrc",
- "options": {
- "parser": "json"
- }
- }]
- }
Vscode setting.json 设置


- {
- // 将设置放入此文件中以覆盖默认设置
- "files.autoSave": "off",
- // 控制字体系列。
- "editor.fontFamily": "Consolas, 'Courier New', monospace,'宋体'",
- "terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe",
- // 以像素为单位控制字号。
- "editor.fontSize": 16,
- // 控制选取范围是否有圆角
- "editor.roundedSelection": false,
- // 建议小组件的字号
- "editor.suggestFontSize": 16,
- // 在“打开的编辑器”窗格中显示的编辑器数量。将其设置为 0 可隐藏窗格。
- "explorer.openEditors.visible": 0,
- // 是否已启用自动刷新
- "git.autorefresh": true,
- // 以像素为单位控制终端的字号,这是 editor.fontSize 的默认值。
- "terminal.integrated.fontSize": 14,
- // 控制终端游标是否闪烁。
- "terminal.integrated.cursorBlinking": true,
- // 一个制表符等于的空格数。该设置在 `editor.detectIndentation` 启用时根据文件内容进行重写。
- // Tab Size
- "editor.tabSize": 2,
- // By default, common template. Do not modify it!!!!!
- "editor.formatOnType": true,
- "window.zoomLevel": 0,
- "editor.detectIndentation": false,
- "css.fileExtensions": ["css", "scss"],
- "files.associations": {
- "*.string": "html",
- "*.vue": "vue",
- "*.wxss": "css",
- "*.wxml": "wxml",
- "*.wxs": "javascript",
- "*.cjson": "jsonc",
- "*.js": "javascript"
- },
- // 为指定的语法定义配置文件或使用带有特定规则的配置文件。
- "emmet.syntaxProfiles": {
- "vue-html": "html",
- "vue": "html"
- },
- "search.exclude": {
- "**/node_modules": true,
- "**/bower_components": true
- },
- //保存时eslint自动修复错误
- "editor.formatOnSave": true,
- // Enable per-language
- //配置 ESLint 检查的文件类型
- "editor.quickSuggestions": {
- "strings": true
- },
- // 添加 vue 支持
- // 这里是针对vue文件的格式化设置,vue的规则在这里生效
- "vetur.format.options.tabSize": 2,
- "vetur.format.options.useTabs": false,
- "vetur.format.defaultFormatter.html": "js-beautify-html",
- "vetur.format.defaultFormatter.css": "prettier",
- "vetur.format.defaultFormatter.scss": "prettier",
- "vetur.format.defaultFormatter.postcss": "prettier",
- "vetur.format.defaultFormatter.less": "prettier",
- "vetur.format.defaultFormatter.js": "vscode-typescript",
- "vetur.format.defaultFormatter.sass": "sass-formatter",
- "vetur.format.defaultFormatter.ts": "prettier",
- "vetur.format.defaultFormatterOptions": {
- "js-beautify-html": {
- "wrap_attributes": "aligned-multiple", // 超过150折行
- "wrap-line-length": 150
- },
- // #vue组件中html代码格式化样式
- "prettier": {
- "printWidth": 120,
- "tabWidth": 2,
- "singleQuote": false,
- "trailingComma": "none",
- "semi": false,
- "wrap_line_length": 120,
- "wrap_attributes": "aligned-multiple", // 超过150折行
- "proseWrap": "always",
- "arrowParens": "avoid",
- "bracketSpacing": true,
- "jsxBracketSameLine": true,
- "useTabs": false,
- "overrides": [
- {
- "files": ".prettierrc",
- "options": {
- "parser": "json"
- }
- }
- ]
- }
- },
- // Enable per-language
- "[json]": {
- "editor.defaultFormatter": "esbenp.prettier-vscode"
- },
- "vetur.validation.template": false,
- "html.format.enable": false,
- "json.format.enable": false,
- "javascript.format.enable": false,
- "typescript.format.enable": false,
- "javascript.format.insertSpaceAfterFunctionKeywordForAnonymousFunctions": false,
- "[html]": {
- "editor.defaultFormatter": "esbenp.prettier-vscode"
- },
- "[javascript]": {
- "editor.defaultFormatter": "esbenp.prettier-vscode"
- },
- "[jsonc]": {
- "editor.defaultFormatter": "esbenp.prettier-vscode"
- },
- "[vue]": {
- "editor.defaultFormatter": "octref.vetur"
- },
- "emmet.includeLanguages": {
- "wxml": "html"
- },
- "[typescriptreact]": {
- "editor.defaultFormatter": "esbenp.prettier-vscode"
- },
- // 开启eslint自动修复js/ts功能
- "editor.codeActionsOnSave": {
- "source.fixAll.eslint": true
- },
- "minapp-vscode.disableAutoConfig": true,
- "javascript.implicitProjectConfig.experimentalDecorators": true,
- "editor.maxTokenizationLineLength": 200000,
- "workbench.colorTheme": "Dracula Soft",
- "workbench.iconTheme": "vscode-icons",
- "workbench.editorAssociations": []
- }
.eslintrc.js


- module.exports = {
- root: true,
- env: {
- node: true
- },
- extends: ['plugin:vue/essential', '@vue/standard'],
- parserOptions: {
- parser: 'babel-eslint'
- },
- rules: {
- 'vue/max-attributes-per-line': [
- 2,
- {
- singleline: 10,
- multiline: {
- max: 1,
- allowFirstLine: false
- }
- }
- ],
- 'vue/singleline-html-element-content-newline': 'off',
- 'vue/multiline-html-element-content-newline': 'off',
- 'vue/name-property-casing': ['error', 'PascalCase'],
- 'vue/no-v-html': 'off',
- 'accessor-pairs': 2,
- 'arrow-spacing': [
- 2,
- {
- before: true,
- after: true
- }
- ],
- 'block-spacing': [2, 'always'],
- 'brace-style': [
- 2,
- '1tbs',
- {
- allowSingleLine: true
- }
- ],
- camelcase: [
- 0,
- {
- properties: 'always'
- }
- ],
- 'comma-dangle': [2, 'never'],
- 'comma-spacing': [
- 2,
- {
- before: false,
- after: true
- }
- ],
- 'comma-style': [2, 'last'],
- 'constructor-super': 2,
- curly: [2, 'multi-line'],
- 'dot-location': [2, 'property'],
- 'eol-last': 2,
- eqeqeq: ['error', 'always', { null: 'ignore' }],
- 'generator-star-spacing': [
- 2,
- {
- before: true,
- after: true
- }
- ],
- 'handle-callback-err': [2, '^(err|error)$'],
- indent: [
- 2,
- 2,
- {
- SwitchCase: 1
- }
- ],
- 'jsx-quotes': [2, 'prefer-single'],
- 'key-spacing': [
- 2,
- {
- beforeColon: false,
- afterColon: true
- }
- ],
- 'keyword-spacing': [
- 2,
- {
- before: true,
- after: true
- }
- ],
- 'new-cap': [
- 2,
- {
- newIsCap: true,
- capIsNew: false
- }
- ],
- 'new-parens': 2,
- 'no-array-constructor': 2,
- 'no-caller': 2,
- 'no-console': 'off',
- 'no-class-assign': 2,
- 'no-cond-assign': 2,
- 'no-const-assign': 2,
- 'no-control-regex': 0,
- 'no-delete-var': 2,
- 'no-dupe-args': 2,
- 'no-dupe-class-members': 2,
- 'no-dupe-keys': 2,
- 'no-duplicate-case': 2,
- 'no-empty-character-class': 2,
- 'no-empty-pattern': 2,
- 'no-eval': 2,
- 'no-ex-assign': 2,
- 'no-extend-native': 2,
- 'no-extra-bind': 2,
- 'no-extra-boolean-cast': 2,
- 'no-extra-parens': [2, 'functions'],
- 'no-fallthrough': 2,
- 'no-floating-decimal': 2,
- 'no-func-assign': 2,
- 'no-implied-eval': 2,
- 'no-inner-declarations': [2, 'functions'],
- 'no-invalid-regexp': 2,
- 'no-irregular-whitespace': 2,
- 'no-iterator': 2,
- 'no-label-var': 2,
- 'no-labels': [
- 2,
- {
- allowLoop: false,
- allowSwitch: false
- }
- ],
- 'no-lone-blocks': 2,
- 'no-mixed-spaces-and-tabs': 2,
- 'no-multi-spaces': 2,
- 'no-multi-str': 2,
- 'no-multiple-empty-lines': [
- 2,
- {
- max: 1
- }
- ],
- 'no-native-reassign': 2,
- 'no-negated-in-lhs': 2,
- 'no-new-object': 2,
- 'no-new-require': 2,
- 'no-new-symbol': 2,
- 'no-new-wrappers': 2,
- 'no-obj-calls': 2,
- 'no-octal': 2,
- 'no-octal-escape': 2,
- 'no-path-concat': 2,
- 'no-proto': 2,
- 'no-redeclare': 2,
- 'no-regex-spaces': 2,
- 'no-return-assign': [2, 'except-parens'],
- 'no-self-assign': 2,
- 'no-self-compare': 2,
- 'no-sequences': 2,
- 'no-shadow-restricted-names': 2,
- 'no-spaced-func': 2,
- 'no-sparse-arrays': 2,
- 'no-this-before-super': 2,
- 'no-throw-literal': 2,
- 'no-trailing-spaces': 2,
- 'no-undef': 2,
- 'no-undef-init': 2,
- 'no-unexpected-multiline': 2,
- 'no-unmodified-loop-condition': 2,
- 'no-unneeded-ternary': [
- 2,
- {
- defaultAssignment: false
- }
- ],
- 'no-unreachable': 2,
- 'no-unsafe-finally': 2,
- 'no-unused-vars': [
- 2,
- {
- vars: 'all',
- args: 'none'
- }
- ],
- 'no-useless-call': 2,
- 'no-useless-computed-key': 2,
- 'no-useless-constructor': 2,
- 'no-useless-escape': 0,
- 'no-whitespace-before-property': 2,
- 'no-with': 2,
- 'one-var': [
- 2,
- {
- initialized: 'never'
- }
- ],
- 'operator-linebreak': [
- 2,
- 'after',
- {
- overrides: {
- '?': 'before',
- ':': 'before'
- }
- }
- ],
- 'padded-blocks': [2, 'never'],
- quotes: [
- 2,
- 'single',
- {
- avoidEscape: true,
- allowTemplateLiterals: true
- }
- ],
- semi: [2, 'never'],
- 'semi-spacing': [
- 2,
- {
- before: false,
- after: true
- }
- ],
- 'space-before-blocks': [2, 'always'],
- 'space-before-function-paren': [2, 'never'],
- 'space-in-parens': [2, 'never'],
- 'space-infix-ops': 2,
- 'space-unary-ops': [
- 2,
- {
- words: true,
- nonwords: false
- }
- ],
- 'spaced-comment': [
- 2,
- 'always',
- {
- markers: ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ',']
- }
- ],
- 'template-curly-spacing': [2, 'never'],
- 'use-isnan': 2,
- 'valid-typeof': 2,
- 'wrap-iife': [2, 'any'],
- 'yield-star-spacing': [2, 'both'],
- yoda: [2, 'never'],
- 'prefer-const': 2,
- 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
- 'object-curly-spacing': [
- 2,
- 'always',
- {
- objectsInObjects: false
- }
- ],
- 'array-bracket-spacing': [2, 'never']
- }
- }
.eslintignore
- build/*.js
- src/assets
- public
- dist
eslint prettier vetur eslint的更多相关文章
- vscode, eslint, prettier, vetur冲突及解决
这3工具都必须安装. 但是安装之后, 规则冲突又让人头疼. 讲下解决方案吧.一 从0开始1. 禁止工作区插件, 如下图: 2. 清空用户设置(Code–>首选项–>设置–>[右上角 ...
- vscode 中 eslint prettier 和 eslint -loader 配置关系
前置 本文将探究 vscode prettier 插件 和 eslint 插件在 vscode 中的配置以及这两者对应的在项目中的配置文件的关系,最后提及 vscode eslint 插件配置与 es ...
- 在vscode中使用eslint+prettier格式化vue项目代码 (转载)
ESlint:javascript代码检测工具,可以配置每次保存时格式化js,但每次保存只格式化一点点,你得连续按住Ctrl+S好几次,才格式化好,自行体会~~ vetur:可以格式化html.标准c ...
- VS Code 自动修改和保存 代码风格 == eslint+prettier
最近因为用到VS Code,需要统一所有人的代码风格(前端语言js/html/css等,或者后端语言 go/python等也可以这么用). 所以参考了一些网络资料,记录下设置步骤,以便后续查阅. St ...
- vs Code + Eslint + Prettier 代码格式化(vue开发)
一.什么是Eslint 通过查看eslint官网(官网传送门),我们就可以知道,eslint就是一个用来识别 ECMAScript/JavaScript 并且按照规则给出报告的代码检测工具,主要用来检 ...
- eslint prettier editrorconfig - 写出干净的前端代码
FConfidence 关注 2018.12.30 02:38* 字数 2912 阅读 195评论 0喜欢 0 VSCode 插件安装 Prettier - Code Formatter ESLint ...
- React-native ESLint & Prettier & Pre-commit Hook配置
目录 前言 一 eslint 1.1. 局部安装eslint 1.2 初始化配置文件 1.3 安装步骤 1.3.1 ESLint 风格 选Use a popular style guide 1.3.2 ...
- VSCode 使用 ESLint + Prettier 来统一 JS 代码
环境: VSCode 1.33.1 Node.js 8.9.1 一.ESLint 1.介绍 ESLint是最流行的JavaScript Linter. Linter 是检查代码风格/错误的小工具.其他 ...
- 使用ESLint+Prettier来统一前端代码风格
Prettier 简单使用 ESLint 与 Prettier配合使用 首先肯定是需要安装 prettier ,并且你的项目中已经使用了 ESLint ,有 eslintrc.js 配置文件. npm ...
随机推荐
- 大型企业都在用的Python反爬虫手段,破了它!
SVG 映射反爬虫 很多人学习python,不知道从何学起.很多人学习python,掌握了基本语法过后,不知道在哪里寻找案例上手.很多已经做案例的人,却不知道如何去学习更加高深的知识.那么针对这三类人 ...
- 解决drf_yasg中的SwaggerAPI无法正确分组问题
swagger是后台开发中很好用的交互式文档,Django原本的Django-Swagger已经停止维护了,现在一般用drf_yasg这个包来实现文档,它里面支持swagger和redoc两种,red ...
- 怎么写简历,简历才不会被丢到非洲🌍
前言 只有光头才能变强. 文本已收录至我的GitHub精选文章,欢迎Star:https://github.com/ZhongFuCheng3y/3y 最近的三歪朋友圈可以看到很多的字节.腾讯的同学都 ...
- 企业项目实战 .Net Core + Vue/Angular 分库分表日志系统 | 简单的分库分表设计
前言 项目涉及到了一些设计模式,如果你看的不是很明白,没有关系坚持下来,写完之后去思考去品,你就会有一种突拨开云雾的感觉,所以请不要在半途感觉自己看不懂选择放弃,如果我哪里写的详细,或者需要修正请联系 ...
- put数据到topic
基于python3.6 # -*-coding:utf-8 *- __author__ = 'lc_yy' from pykafka import KafkaClient import logging ...
- JVM的方法执行引擎-entry point栈帧
接着上一篇去讲,回到JavaCalls::call_helper()中: address entry_point = method->from_interpreted_entry(); entr ...
- unity探索者之socket传输protobuf字节流(一)
版权声明:本文为原创文章,转载请声明http://www.cnblogs.com/unityExplorer/p/6974229.html 近期在做一个棋牌项目,需要用到socket传输protobu ...
- 喵的Unity游戏开发之路 - 推球:游戏中的物理
很多童鞋没有系统的Unity3D游戏开发基础,也不知道从何开始学.为此我们精选了一套国外优秀的Unity3D游戏开发教程,翻译整理后放送给大家,教您从零开始一步一步掌握Unity3D游戏开发. 本文不 ...
- IDEA - 错误提示 Could not autowire. No beans of '' type found
工具: IntelliJ IDEA 2019.3.4 x64 Ultimate,maven项目: 现象:如下图所示,出现Could not autowire. No beans of '' type ...
- 进阶6:连接查询 二、sql99语法
#二.sql99语法/*语法: select 查询列表 from 表1 别名 [连接类型] join 表2 别名 on 连接条件 [where 筛选条件] [group by 分组] [having ...