feat: 50 similar linting rules throughout the tresjs packages (#51)

* feature: added eslint rules to have homogeneous rules in the tres ecosystem

* chore: applied eslint fixes

* chore: moved linting rules to correct position

---------

Co-authored-by: Tino Koch <[email protected]>

Author: Tinoooo

.eslintignore

@@ -0,0 +1,8 @@
+dist
+**.spec.js
+**.test.ts
+**.test.js
+**.cy.js
+**/cypress/**
+docs/.vitepress/cache
+docs/.vitepress/dist

.eslintrc.json

@@ -0,0 +1,7 @@
+{
+  "extends": "@tresjs/eslint-config-vue",
+  "rules": {
+    "@typescript-eslint/no-use-before-define": "off",
+    "vue/valid-template-root": "off"
+  }
+}

.prettierrc.cjs

@@ -0,0 +1,3 @@
+{
+  "extends": "@tresjs/eslint-config-vue"
+}

docs/.eslintrc.json

@@ -1,4 +1,5 @@
 <script setup>
+// eslint-disable-next-line import/no-named-as-default
 import DefaultTheme from 'vitepress/theme'
 import LoveVueThreeJS from './components/LoveVueThreeJS.vue'
 

docs/.vitepress/theme/TresLayout.vue

@@ -24,11 +24,13 @@ const bloomParams = reactive({
 
 <template>
   <TresCanvas v-bind="gl">
-    <TresPerspectiveCamera :position="[5, 5, 5]" :look-at="[0, 0, 0]" />
+    <TresPerspectiveCamera
+      :position="[5, 5, 5]"
+      :look-at="[0, 0, 0]"
+    />
     <TresMesh>
       <TresSphereGeometry :args="[2, 32, 32]" />
       <TresMeshStandardMaterial
-        ref="materialRef"
         color="hotpink"
         :emissive="new Color('hotpink')"
         :emissive-intensity="1.2"
@@ -37,10 +39,13 @@ const bloomParams = reactive({
     <TresGridHelper />
 
     <TresAmbientLight :intensity="2" />
-    <TresDirectionalLight :position="[3, 3, 3]" :intensity="1" />
+    <TresDirectionalLight
+      :position="[3, 3, 3]"
+      :intensity="1"
+    />
     <Suspense>
       <EffectComposer>
-        <Bloom v-bind="bloomParams"> </Bloom>
+        <Bloom v-bind="bloomParams" />
       </EffectComposer>
     </Suspense>
   </TresCanvas>

docs/.vitepress/theme/components/BloomDemo.vue

@@ -15,15 +15,17 @@ const gl = {
 
 <template>
   <TresCanvas v-bind="gl">
-    <TresPerspectiveCamera :position="[0, 1, 5]" :look-at="[0, 0, 0]" />
+    <TresPerspectiveCamera
+      :position="[0, 1, 5]"
+      :look-at="[0, 0, 0]"
+    />
     <Suspense>
       <Text3D
         :position="[0, 1, 0]"
         text="Post-processing"
         font="https://raw.githubusercontent.com/Tresjs/assets/main/fonts/FiraCodeRegular.json"
       >
         <TresMeshStandardMaterial
-          ref="materialRef"
           color="hotpink"
           :emissive="new Color('hotpink')"
           :emissive-intensity="1.2"
@@ -33,7 +35,10 @@ const gl = {
     <TresGridHelper />
 
     <TresAmbientLight :intensity="2" />
-    <TresDirectionalLight :position="[3, 3, 3]" :intensity="1" />
+    <TresDirectionalLight
+      :position="[3, 3, 3]"
+      :intensity="1"
+    />
     <Suspense>
       <EffectComposer>
         <Glitch />

docs/.vitepress/theme/components/GlitchDemo.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
 ///<reference types="vite-svg-loader" />
+// eslint-disable-next-line import/no-named-as-default
+import gsap from 'gsap'
+import { onMounted, ref } from 'vue'
 import Triangle from '../assets/triangle.svg'
 import SecondRow from '../assets/second-row.svg'
 import ThirdRow from '../assets/third-row.svg'
-import gsap from 'gsap'
-import { onMounted, ref } from 'vue'
 
 const triangleRef = ref()
 const secondRowRef = ref()
@@ -19,13 +20,13 @@ async function restartAnimation() {
   gsap.to(secondRowRef.value.$el, {
     duration: 1,
     y: 0,
-    ease: "elastic.out(0.7, 0.2)",
+    ease: 'elastic.out(0.7, 0.2)',
   })
   await gsap.to(thirdRowRef.value.$el, {
     delay: 0.65,
     duration: 1,
     y: 0,
-    ease: "steps(4)",
+    ease: 'steps(4)',
   })
 
   tl2r.restart()
@@ -43,13 +44,16 @@ onMounted(() => {
     delay: 1.25,
     duration: 2,
     y: -(12 * heightOfSignleSvg),
-    ease: "power1.out",
+    ease: 'power1.out',
   })
 })
 </script>
 
 <template>
-  <div class="grid items-center w-full min-w-370px -translate-x-20px md:translate-x-20px h-full scale-75" @click="restartAnimation">
+  <div
+    class="grid items-center w-full min-w-370px -translate-x-20px md:translate-x-20px h-full scale-75"
+    @click="restartAnimation"
+  >
     <div class="grid grid-cols-3 gap-8 overflow-hidden h-93px">
       <Triangle ref="triangleRef" />
       <SecondRow ref="secondRowRef" />

docs/.vitepress/theme/components/LoveVueThreeJS.vue

@@ -1,11 +1,11 @@
 <script lang="ts" setup>
-import { ref } from 'vue'
+import { ref, shallowRef } from 'vue'
 import { watchOnce } from '@vueuse/core'
-import { shallowRef } from 'vue'
 import { TresCanvas } from '@tresjs/core'
 import { KernelSize } from 'postprocessing'
 import { EffectComposer, Outline } from '/@'
-import { Color, Intersection, Object3D } from 'three'
+import type { Intersection, Object3D } from 'three'
+import { Color } from 'three'
 
 const boxWidth = 2
 const outlinedObjects = ref<Object3D[]>([])
@@ -25,21 +25,36 @@ watchOnce(meshes, () => {
 </script>
 
 <template>
-  <TresCanvas clear-color="#121212" :alpha="false" :shadows="true" :disable-render="true">
-    <TresPerspectiveCamera :position="[3, 3, 4]" :look-at="[0, 0, 0]" />
+  <TresCanvas
+    clear-color="#121212"
+    :alpha="false"
+    :shadows="true"
+    :disable-render="true"
+  >
+    <TresPerspectiveCamera
+      :position="[3, 3, 4]"
+      :look-at="[0, 0, 0]"
+    />
     <TresMesh
-      ref="meshes"
       v-for="i in 3"
+      ref="meshes"
       :key="i.toString()"
       :position="[(i - 2) * boxWidth, 0.5, 1]"
       @click="toggleMeshSelectionState"
     >
       <TresBoxGeometry />
-      <TresMeshStandardMaterial color="hotpink" :emissive="new Color('hotpink')" :emissive-intensity="1" />
+      <TresMeshStandardMaterial
+        color="hotpink"
+        :emissive="new Color('hotpink')"
+        :emissive-intensity="1"
+      />
     </TresMesh>
     <TresGridHelper />
     <TresAmbientLight :intensity="2" />
-    <TresDirectionalLight :position="[-4, 4, 3]" :intensity="2" />
+    <TresDirectionalLight
+      :position="[-4, 4, 3]"
+      :intensity="2"
+    />
 
     <Suspense>
       <EffectComposer>

docs/.vitepress/theme/components/OutlineDemo.vue

@@ -37,6 +37,7 @@
     "preview": "vite preview",
     "release": "release-it",
     "lint": "eslint . --ext .js,.jsx,.ts,.tsx,.vue",
+    "lint:fix": "pnpm run lint --fix",
     "docs:dev": "vitepress dev docs",
     "docs:build": "vitepress build docs",
     "docs:preview": "vitepress preview docs"
@@ -52,8 +53,8 @@
     "three-stdlib": "^2.23.10"
   },
   "devDependencies": {
-    "@alvarosabu/prettier-config": "^1.3.0",
     "@release-it/conventional-changelog": "^5.1.1",
+    "@tresjs/eslint-config-vue": "^0.1.1",
     "@types/three": "^0.152.1",
     "@vitejs/plugin-vue": "^4.2.3",
     "gsap": "^3.12.1",

package.json

@@ -0,0 +1,6 @@
+{
+  "extends": "@tresjs/eslint-config-vue",
+  "rules": {
+    "no-console": "off"
+  }
+}

playground/.eslintrc.json

@@ -2,10 +2,9 @@
 import { TresCanvas } from '@tresjs/core'
 import { OrbitControls, useTweakPane } from '@tresjs/cientos'
 import { EffectComposer, Glitch } from '@tresjs/post-processing'
-import { BasicShadowMap, NoToneMapping, SRGBColorSpace } from 'three'
+import { BasicShadowMap, NoToneMapping, SRGBColorSpace, Vector2 } from 'three'
 import { reactive } from 'vue'
 import { GlitchMode } from 'postprocessing'
-import { Vector2 } from 'three'
 
 const gl = {
   clearColor: '#121212',
@@ -48,8 +47,14 @@ pane.addInput(glitchParams, 'dtSize', { min: 1, max: 64, step: 1 })
 </script>
 
 <template>
-  <TresCanvas v-bind="gl" :disable-render="true">
-    <TresPerspectiveCamera :position="[5, 5, 5]" :look-at="[0, 0, 0]" />
+  <TresCanvas
+    v-bind="gl"
+    :disable-render="true"
+  >
+    <TresPerspectiveCamera
+      :position="[5, 5, 5]"
+      :look-at="[0, 0, 0]"
+    />
     <OrbitControls />
     <TresMesh>
       <TresSphereGeometry :args="[2, 32, 32]" />

playground/src/components/GlitchDemo.vue

@@ -3,7 +3,8 @@ import { TresCanvas } from '@tresjs/core'
 import { OrbitControls, useTweakPane } from '@tresjs/cientos'
 import { reactive, ref } from 'vue'
 import { EffectComposer, Outline } from '@tresjs/post-processing'
-import { BasicShadowMap, NoToneMapping, Object3D, Intersection } from 'three'
+import type { Object3D, Intersection } from 'three'
+import { BasicShadowMap, NoToneMapping } from 'three'
 
 const gl = {
   alpha: false,
@@ -37,11 +38,24 @@ pane.addInput(outlineParameters, 'visibleEdgeColor')
 
 <template>
   <TresCanvas v-bind="gl">
-    <TresPerspectiveCamera :position="[3, 3, 3]" :look-at="[2, 2, 2]" />
+    <TresPerspectiveCamera
+      :position="[3, 3, 3]"
+      :look-at="[2, 2, 2]"
+    />
     <OrbitControls />
-    <template v-for="i in 5" :key="i">
-      <TresMesh @click="toggleMeshSelectionState" :position="[i * 1.1 - 2.8, 1, 0]">
-        <TresBoxGeometry :width="4" :height="4" :depth="4" />
+    <template
+      v-for="i in 5"
+      :key="i"
+    >
+      <TresMesh
+        :position="[i * 1.1 - 2.8, 1, 0]"
+        @click="toggleMeshSelectionState"
+      >
+        <TresBoxGeometry
+          :width="4"
+          :height="4"
+          :depth="4"
+        />
         <TresMeshNormalMaterial />
       </TresMesh>
     </template>
@@ -50,7 +64,10 @@ pane.addInput(outlineParameters, 'visibleEdgeColor')
     <TresAmbientLight :intensity="1" />
     <Suspense>
       <EffectComposer>
-        <Outline :outlined-objects="outlinedObjects" v-bind="outlineParameters" />
+        <Outline
+          :outlined-objects="outlinedObjects"
+          v-bind="outlineParameters"
+        />
       </EffectComposer>
     </Suspense>
   </TresCanvas>

playground/src/components/OutlineDemo.vue

@@ -14,8 +14,14 @@ const gl = {
 </script>
 
 <template>
-  <TresCanvas v-bind="gl" disable-render>
-    <TresPerspectiveCamera :position="[5, 5, 5]" :look-at="[0, 0, 0]" />
+  <TresCanvas
+    v-bind="gl"
+    disable-render
+  >
+    <TresPerspectiveCamera
+      :position="[5, 5, 5]"
+      :look-at="[0, 0, 0]"
+    />
 
     <TresMesh>
       <TresSphereGeometry :args="[2, 32, 32]" />

playground/src/components/TheExperience.vue

@@ -1,11 +1,10 @@
 <script setup lang="ts">
-import { Color } from 'three'
+import { Color, BasicShadowMap, NoToneMapping } from 'three'
 import { TresCanvas } from '@tresjs/core'
 import { OrbitControls, useTweakPane } from '@tresjs/cientos'
 import { BlendFunction } from 'postprocessing'
 import { EffectComposer, Bloom } from '@tresjs/post-processing'
 import { onMounted, reactive, ref } from 'vue'
-import { BasicShadowMap, NoToneMapping } from 'three'
 
 const gl = {
   clearColor: '#121212',
@@ -40,12 +39,22 @@ onMounted(() => {
 </script>
 
 <template>
-  <TresCanvas v-bind="gl" :disable-render="true">
-    <TresPerspectiveCamera :position="[5, 5, 5]" :look-at="[0, 0, 0]" />
+  <TresCanvas
+    v-bind="gl"
+    :disable-render="true"
+  >
+    <TresPerspectiveCamera
+      :position="[5, 5, 5]"
+      :look-at="[0, 0, 0]"
+    />
     <OrbitControls />
     <TresMesh>
       <TresSphereGeometry :args="[2, 32, 32]" />
-      <TresMeshStandardMaterial color="hotpink" :emissive="new Color('hotpink')" :emissive-intensity="9" />
+      <TresMeshStandardMaterial
+        color="hotpink"
+        :emissive="new Color('hotpink')"
+        :emissive-intensity="9"
+      />
     </TresMesh>
     <TresMesh :position="[2, 2, -2]">
       <TresSphereGeometry :args="[2, 32, 32]" />
@@ -62,10 +71,13 @@ onMounted(() => {
     </TresMesh>
     <TresGridHelper />
     <TresAmbientLight :intensity="0.5" />
-    <TresDirectionalLight :position="[3, 3, 3]" :intensity="2" />
+    <TresDirectionalLight
+      :position="[3, 3, 3]"
+      :intensity="2"
+    />
     <Suspense>
       <EffectComposer :depth-buffer="true">
-        <Bloom v-bind="bloomParams"></Bloom>
+        <Bloom v-bind="bloomParams" />
       </EffectComposer>
     </Suspense>
   </TresCanvas>

playground/src/components/UnrealBloom.vue

@@ -1,5 +1,5 @@
+<script lang="ts" setup></script>
+
 <template>
   <GlitchDemo />
 </template>
-
-<script lang="ts" setup></script>