VScode (版本 1.47.3)安装 eslint prettier vetur 插件 .vue 文件使用 vetur 进行格式化

在文件 .prettierrc 里写 属于你的 pettier 规则

  1. {
  2. "printWidth": 120,
  3. "tabWidth": 2,
  4. "singleQuote": true,
  5. "trailingComma": "none",
  6. "semi": false,
  7. "wrap_line_length": 120,
  8. "wrap_attributes": "auto",
  9. "proseWrap": "always",
  10. "arrowParens": "avoid",
  11. "bracketSpacing": false,
  12. "jsxBracketSameLine": true,
  13. "useTabs": false,
  14. "overrides": [{
  15. "files": ".prettierrc",
  16. "options": {
  17. "parser": "json"
  18. }
  19. }]
  20. }

Vscode setting.json 设置

  1. {
  2. // 将设置放入此文件中以覆盖默认设置
  3. "files.autoSave": "off",
  4. // 控制字体系列。
  5. "editor.fontFamily": "Consolas, 'Courier New', monospace,'宋体'",
  6. "terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe",
  7. // 以像素为单位控制字号。
  8. "editor.fontSize": 16,
  9. // 控制选取范围是否有圆角
  10. "editor.roundedSelection": false,
  11. // 建议小组件的字号
  12. "editor.suggestFontSize": 16,
  13. // 在“打开的编辑器”窗格中显示的编辑器数量。将其设置为 0 可隐藏窗格。
  14. "explorer.openEditors.visible": 0,
  15. // 是否已启用自动刷新
  16. "git.autorefresh": true,
  17. // 以像素为单位控制终端的字号,这是 editor.fontSize 的默认值。
  18. "terminal.integrated.fontSize": 14,
  19. // 控制终端游标是否闪烁。
  20. "terminal.integrated.cursorBlinking": true,
  21. // 一个制表符等于的空格数。该设置在 `editor.detectIndentation` 启用时根据文件内容进行重写。
  22. // Tab Size
  23. "editor.tabSize": 2,
  24. // By default, common template. Do not modify it!!!!!
  25. "editor.formatOnType": true,
  26. "window.zoomLevel": 0,
  27. "editor.detectIndentation": false,
  28. "css.fileExtensions": ["css", "scss"],
  29. "files.associations": {
  30. "*.string": "html",
  31. "*.vue": "vue",
  32. "*.wxss": "css",
  33. "*.wxml": "wxml",
  34. "*.wxs": "javascript",
  35. "*.cjson": "jsonc",
  36. "*.js": "javascript"
  37. },
  38. // 为指定的语法定义配置文件或使用带有特定规则的配置文件。
  39. "emmet.syntaxProfiles": {
  40. "vue-html": "html",
  41. "vue": "html"
  42. },
  43. "search.exclude": {
  44. "**/node_modules": true,
  45. "**/bower_components": true
  46. },
  47. //保存时eslint自动修复错误
  48. "editor.formatOnSave": true,
  49. // Enable per-language
  50. //配置 ESLint 检查的文件类型
  51. "editor.quickSuggestions": {
  52. "strings": true
  53. },
  54. // 添加 vue 支持
  55. // 这里是针对vue文件的格式化设置,vue的规则在这里生效
  56. "vetur.format.options.tabSize": 2,
  57. "vetur.format.options.useTabs": false,
  58. "vetur.format.defaultFormatter.html": "js-beautify-html",
  59. "vetur.format.defaultFormatter.css": "prettier",
  60. "vetur.format.defaultFormatter.scss": "prettier",
  61. "vetur.format.defaultFormatter.postcss": "prettier",
  62. "vetur.format.defaultFormatter.less": "prettier",
  63. "vetur.format.defaultFormatter.js": "vscode-typescript",
  64. "vetur.format.defaultFormatter.sass": "sass-formatter",
  65. "vetur.format.defaultFormatter.ts": "prettier",
  66. "vetur.format.defaultFormatterOptions": {
  67. "js-beautify-html": {
  68. "wrap_attributes": "aligned-multiple", // 超过150折行
  69. "wrap-line-length": 150
  70. },
  71. // #vue组件中html代码格式化样式
  72. "prettier": {
  73. "printWidth": 120,
  74. "tabWidth": 2,
  75. "singleQuote": false,
  76. "trailingComma": "none",
  77. "semi": false,
  78. "wrap_line_length": 120,
  79. "wrap_attributes": "aligned-multiple", // 超过150折行
  80. "proseWrap": "always",
  81. "arrowParens": "avoid",
  82. "bracketSpacing": true,
  83. "jsxBracketSameLine": true,
  84. "useTabs": false,
  85. "overrides": [
  86. {
  87. "files": ".prettierrc",
  88. "options": {
  89. "parser": "json"
  90. }
  91. }
  92. ]
  93. }
  94. },
  95. // Enable per-language
  96. "[json]": {
  97. "editor.defaultFormatter": "esbenp.prettier-vscode"
  98. },
  99. "vetur.validation.template": false,
  100. "html.format.enable": false,
  101. "json.format.enable": false,
  102. "javascript.format.enable": false,
  103. "typescript.format.enable": false,
  104. "javascript.format.insertSpaceAfterFunctionKeywordForAnonymousFunctions": false,
  105. "[html]": {
  106. "editor.defaultFormatter": "esbenp.prettier-vscode"
  107. },
  108. "[javascript]": {
  109. "editor.defaultFormatter": "esbenp.prettier-vscode"
  110. },
  111. "[jsonc]": {
  112. "editor.defaultFormatter": "esbenp.prettier-vscode"
  113. },
  114. "[vue]": {
  115. "editor.defaultFormatter": "octref.vetur"
  116. },
  117. "emmet.includeLanguages": {
  118. "wxml": "html"
  119. },
  120. "[typescriptreact]": {
  121. "editor.defaultFormatter": "esbenp.prettier-vscode"
  122. },
  123. // 开启eslint自动修复js/ts功能
  124. "editor.codeActionsOnSave": {
  125. "source.fixAll.eslint": true
  126. },
  127. "minapp-vscode.disableAutoConfig": true,
  128. "javascript.implicitProjectConfig.experimentalDecorators": true,
  129. "editor.maxTokenizationLineLength": 200000,
  130. "workbench.colorTheme": "Dracula Soft",
  131. "workbench.iconTheme": "vscode-icons",
  132. "workbench.editorAssociations": []
  133. }

.eslintrc.js

  1. module.exports = {
  2. root: true,
  3. env: {
  4. node: true
  5. },
  6. extends: ['plugin:vue/essential', '@vue/standard'],
  7. parserOptions: {
  8. parser: 'babel-eslint'
  9. },
  10.  
  11. rules: {
  12. 'vue/max-attributes-per-line': [
  13. 2,
  14. {
  15. singleline: 10,
  16. multiline: {
  17. max: 1,
  18. allowFirstLine: false
  19. }
  20. }
  21. ],
  22. 'vue/singleline-html-element-content-newline': 'off',
  23. 'vue/multiline-html-element-content-newline': 'off',
  24. 'vue/name-property-casing': ['error', 'PascalCase'],
  25. 'vue/no-v-html': 'off',
  26. 'accessor-pairs': 2,
  27. 'arrow-spacing': [
  28. 2,
  29. {
  30. before: true,
  31. after: true
  32. }
  33. ],
  34. 'block-spacing': [2, 'always'],
  35. 'brace-style': [
  36. 2,
  37. '1tbs',
  38. {
  39. allowSingleLine: true
  40. }
  41. ],
  42. camelcase: [
  43. 0,
  44. {
  45. properties: 'always'
  46. }
  47. ],
  48. 'comma-dangle': [2, 'never'],
  49. 'comma-spacing': [
  50. 2,
  51. {
  52. before: false,
  53. after: true
  54. }
  55. ],
  56. 'comma-style': [2, 'last'],
  57. 'constructor-super': 2,
  58. curly: [2, 'multi-line'],
  59. 'dot-location': [2, 'property'],
  60. 'eol-last': 2,
  61. eqeqeq: ['error', 'always', { null: 'ignore' }],
  62. 'generator-star-spacing': [
  63. 2,
  64. {
  65. before: true,
  66. after: true
  67. }
  68. ],
  69. 'handle-callback-err': [2, '^(err|error)$'],
  70. indent: [
  71. 2,
  72. 2,
  73. {
  74. SwitchCase: 1
  75. }
  76. ],
  77. 'jsx-quotes': [2, 'prefer-single'],
  78. 'key-spacing': [
  79. 2,
  80. {
  81. beforeColon: false,
  82. afterColon: true
  83. }
  84. ],
  85. 'keyword-spacing': [
  86. 2,
  87. {
  88. before: true,
  89. after: true
  90. }
  91. ],
  92. 'new-cap': [
  93. 2,
  94. {
  95. newIsCap: true,
  96. capIsNew: false
  97. }
  98. ],
  99. 'new-parens': 2,
  100. 'no-array-constructor': 2,
  101. 'no-caller': 2,
  102. 'no-console': 'off',
  103. 'no-class-assign': 2,
  104. 'no-cond-assign': 2,
  105. 'no-const-assign': 2,
  106. 'no-control-regex': 0,
  107. 'no-delete-var': 2,
  108. 'no-dupe-args': 2,
  109. 'no-dupe-class-members': 2,
  110. 'no-dupe-keys': 2,
  111. 'no-duplicate-case': 2,
  112. 'no-empty-character-class': 2,
  113. 'no-empty-pattern': 2,
  114. 'no-eval': 2,
  115. 'no-ex-assign': 2,
  116. 'no-extend-native': 2,
  117. 'no-extra-bind': 2,
  118. 'no-extra-boolean-cast': 2,
  119. 'no-extra-parens': [2, 'functions'],
  120. 'no-fallthrough': 2,
  121. 'no-floating-decimal': 2,
  122. 'no-func-assign': 2,
  123. 'no-implied-eval': 2,
  124. 'no-inner-declarations': [2, 'functions'],
  125. 'no-invalid-regexp': 2,
  126. 'no-irregular-whitespace': 2,
  127. 'no-iterator': 2,
  128. 'no-label-var': 2,
  129. 'no-labels': [
  130. 2,
  131. {
  132. allowLoop: false,
  133. allowSwitch: false
  134. }
  135. ],
  136. 'no-lone-blocks': 2,
  137. 'no-mixed-spaces-and-tabs': 2,
  138. 'no-multi-spaces': 2,
  139. 'no-multi-str': 2,
  140. 'no-multiple-empty-lines': [
  141. 2,
  142. {
  143. max: 1
  144. }
  145. ],
  146. 'no-native-reassign': 2,
  147. 'no-negated-in-lhs': 2,
  148. 'no-new-object': 2,
  149. 'no-new-require': 2,
  150. 'no-new-symbol': 2,
  151. 'no-new-wrappers': 2,
  152. 'no-obj-calls': 2,
  153. 'no-octal': 2,
  154. 'no-octal-escape': 2,
  155. 'no-path-concat': 2,
  156. 'no-proto': 2,
  157. 'no-redeclare': 2,
  158. 'no-regex-spaces': 2,
  159. 'no-return-assign': [2, 'except-parens'],
  160. 'no-self-assign': 2,
  161. 'no-self-compare': 2,
  162. 'no-sequences': 2,
  163. 'no-shadow-restricted-names': 2,
  164. 'no-spaced-func': 2,
  165. 'no-sparse-arrays': 2,
  166. 'no-this-before-super': 2,
  167. 'no-throw-literal': 2,
  168. 'no-trailing-spaces': 2,
  169. 'no-undef': 2,
  170. 'no-undef-init': 2,
  171. 'no-unexpected-multiline': 2,
  172. 'no-unmodified-loop-condition': 2,
  173. 'no-unneeded-ternary': [
  174. 2,
  175. {
  176. defaultAssignment: false
  177. }
  178. ],
  179. 'no-unreachable': 2,
  180. 'no-unsafe-finally': 2,
  181. 'no-unused-vars': [
  182. 2,
  183. {
  184. vars: 'all',
  185. args: 'none'
  186. }
  187. ],
  188. 'no-useless-call': 2,
  189. 'no-useless-computed-key': 2,
  190. 'no-useless-constructor': 2,
  191. 'no-useless-escape': 0,
  192. 'no-whitespace-before-property': 2,
  193. 'no-with': 2,
  194. 'one-var': [
  195. 2,
  196. {
  197. initialized: 'never'
  198. }
  199. ],
  200. 'operator-linebreak': [
  201. 2,
  202. 'after',
  203. {
  204. overrides: {
  205. '?': 'before',
  206. ':': 'before'
  207. }
  208. }
  209. ],
  210. 'padded-blocks': [2, 'never'],
  211. quotes: [
  212. 2,
  213. 'single',
  214. {
  215. avoidEscape: true,
  216. allowTemplateLiterals: true
  217. }
  218. ],
  219. semi: [2, 'never'],
  220. 'semi-spacing': [
  221. 2,
  222. {
  223. before: false,
  224. after: true
  225. }
  226. ],
  227. 'space-before-blocks': [2, 'always'],
  228. 'space-before-function-paren': [2, 'never'],
  229. 'space-in-parens': [2, 'never'],
  230. 'space-infix-ops': 2,
  231. 'space-unary-ops': [
  232. 2,
  233. {
  234. words: true,
  235. nonwords: false
  236. }
  237. ],
  238. 'spaced-comment': [
  239. 2,
  240. 'always',
  241. {
  242. markers: ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ',']
  243. }
  244. ],
  245. 'template-curly-spacing': [2, 'never'],
  246. 'use-isnan': 2,
  247. 'valid-typeof': 2,
  248. 'wrap-iife': [2, 'any'],
  249. 'yield-star-spacing': [2, 'both'],
  250. yoda: [2, 'never'],
  251. 'prefer-const': 2,
  252. 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
  253. 'object-curly-spacing': [
  254. 2,
  255. 'always',
  256. {
  257. objectsInObjects: false
  258. }
  259. ],
  260. 'array-bracket-spacing': [2, 'never']
  261. }
  262. }

.eslintignore

  1. build/*.js
  2. src/assets
  3. public
  4. dist

eslint prettier vetur eslint的更多相关文章

  1. vscode, eslint, prettier, vetur冲突及解决

    这3工具都必须安装. 但是安装之后, 规则冲突又让人头疼. 讲下解决方案吧.一 从0开始1. 禁止工作区插件, 如下图:  2. 清空用户设置(Code–>首选项–>设置–>[右上角 ...

  2. vscode 中 eslint prettier 和 eslint -loader 配置关系

    前置 本文将探究 vscode prettier 插件 和 eslint 插件在 vscode 中的配置以及这两者对应的在项目中的配置文件的关系,最后提及 vscode eslint 插件配置与 es ...

  3. 在vscode中使用eslint+prettier格式化vue项目代码 (转载)

    ESlint:javascript代码检测工具,可以配置每次保存时格式化js,但每次保存只格式化一点点,你得连续按住Ctrl+S好几次,才格式化好,自行体会~~ vetur:可以格式化html.标准c ...

  4. VS Code 自动修改和保存 代码风格 == eslint+prettier

    最近因为用到VS Code,需要统一所有人的代码风格(前端语言js/html/css等,或者后端语言 go/python等也可以这么用). 所以参考了一些网络资料,记录下设置步骤,以便后续查阅. St ...

  5. vs Code + Eslint + Prettier 代码格式化(vue开发)

    一.什么是Eslint 通过查看eslint官网(官网传送门),我们就可以知道,eslint就是一个用来识别 ECMAScript/JavaScript 并且按照规则给出报告的代码检测工具,主要用来检 ...

  6. eslint prettier editrorconfig - 写出干净的前端代码

    FConfidence 关注 2018.12.30 02:38* 字数 2912 阅读 195评论 0喜欢 0 VSCode 插件安装 Prettier - Code Formatter ESLint ...

  7. 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 ...

  8. VSCode 使用 ESLint + Prettier 来统一 JS 代码

    环境: VSCode 1.33.1 Node.js 8.9.1 一.ESLint 1.介绍 ESLint是最流行的JavaScript Linter. Linter 是检查代码风格/错误的小工具.其他 ...

  9. 使用ESLint+Prettier来统一前端代码风格

    Prettier 简单使用 ESLint 与 Prettier配合使用 首先肯定是需要安装 prettier ,并且你的项目中已经使用了 ESLint ,有 eslintrc.js 配置文件. npm ...

随机推荐

  1. 迷之自信的Single_User Mode

    Alter database Set Single_User 对于任何DBA来说,恐怕都不陌生.在我们需要获取数据库独占访问权来做一些数据库紧急维护的时候,这可能是大多数DBA的首选,但它真的可以实现 ...

  2. WebService简单Demo

    看了网上好多关于webservice的例子,基本上对初学者来说都是模棱两可云里雾里,现在,我将网上关于webservice的讲解提炼出来,通过一个最简单使用并且方便的例子,告诉大家什么是webserv ...

  3. SCOI2020迷惑记

    睡了个好觉还是很困但没咋吃饭就出门了. 到了之后随便跟认得到的人扯了两句就进去了. 结果让我们站在外面等... 然后通知说不能自带水和吃的那我这个中午没吃饭的咋整啊. 马上啃了半块巧克力就进了考场,然 ...

  4. 2020重新出发,JAVA入门,标识符&修饰符

    标识符(Identifier ) 标识符是程序员用来命名变量,方法,类或标签的单词,其实就是我们在开发过程中凡是自己可以命名的一些单词就是标识符 标识符命名规则 标识符由字母(a-z,A-Z),数字( ...

  5. Nginx定时日志切割

    Nginx定时日志切割 现有的日志都会存在access.log文件中,但是随着时间的推移,这个文件的内容会越来越多,体积会越来越大,不便于运维 人员查看,所以我们可以通过把这个大的日志文件切割为多份不 ...

  6. Vue 使用v-for对Object进行遍历

    v-for 也可以对Object类型数据进行遍历 value在前, key在后 <div v-for="(value,key) in person"> <p> ...

  7. Python中ansible的使用

    #!/usr/bin/env python # -*- coding: utf8 -*- # @Author: huangmanyao from ansible import constants fr ...

  8. 使用对称加密来加密Spring Cloud Config配置文件

    补充 使用Spring Cloud Config加密功能需要下载JCE扩展,用于生成无限长度的密文.链接:http://www.oracle.com/technetwork/java/javase/d ...

  9. Uni-app从入门到实战

    前言 uni-app是一个使用vue.js开发跨平台应用的前端框架,开发者只需要编写一套代码,便可以发布到IOS.Android和微信小程序等多个平台.所以我打算学习下这个框架,快速浏览了一遍官网之后 ...

  10. 数据隐私和GDPR

    近十几年来,随着大数据给各行各业带来的变化,以及数据时代不断强调的数据就是燃料,谁掌握数据谁就掌握未来的各种论调,大家纷纷开始收集数据,挖掘数据,转卖数据.而个人,作为数据真正拥有者的利益早就在商业利 ...