Promote i18n Ally for frontend localization (#2072)

Co-authored-by: sephrat <34862846+sephrat@users.noreply.github.com>

.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["lokalise.i18n-ally"]
+}

.vscode/settings.json

@@ -1,9 +1,5 @@
 {
-  "cSpell.enableFiletypes": [
-    "!javascript",
-    "!python",
-    "!yaml"
-  ],
+  "cSpell.enableFiletypes": ["!javascript", "!python", "!yaml"],
   "cSpell.words": [
     "chowdown",
     "compression",
@@ -18,9 +14,7 @@
     "source.organizeImports": false
   },
   "editor.formatOnSave": true,
-  "eslint.workingDirectories": [
-    "./frontend"
-  ],
+  "eslint.workingDirectories": ["./frontend"],
   "files.exclude": {
     "**/__pycache__": true,
     "**/.DS_Store": true,
@@ -29,9 +23,7 @@
     "**/.svn": true,
     "**/CVS": true
   },
-  "i18n-ally.enabledFrameworks": [
-    "vue"
-  ],
+  "i18n-ally.enabledFrameworks": ["vue"],
   "i18n-ally.keystyle": "nested",
   "i18n-ally.localesPaths": "frontend/lang/messages",
   "i18n-ally.sourceLanguage": "en-US",
@@ -40,28 +32,16 @@
   "python.linting.enabled": true,
   "python.linting.flake8Enabled": false,
   "python.linting.pylintEnabled": false,
-  "python.linting.pylintArgs": [
-    "--rcfile=${workspaceFolder}/.pylintrc"
-  ],
+  "python.linting.pylintArgs": ["--rcfile=${workspaceFolder}/.pylintrc"],
   "python.testing.autoTestDiscoverOnSaveEnabled": false,
-  "python.testing.pytestArgs": [
-    "tests"
-  ],
+  "python.testing.pytestArgs": ["tests"],
   "python.testing.pytestEnabled": true,
   "python.testing.unittestEnabled": false,
   "python.analysis.typeCheckingMode": "off",
   "python.linting.mypyEnabled": true,
-  "isort.path": [
-    "${workspaceFolder}/.venv/bin/isort"
-  ],
+  "isort.path": ["${workspaceFolder}/.venv/bin/isort"],
   "search.mode": "reuseEditor",
-  "python.testing.unittestArgs": [
-    "-v",
-    "-s",
-    "./tests",
-    "-p",
-    "test_*.py"
-  ],
+  "python.testing.unittestArgs": ["-v", "-s", "./tests", "-p", "test_*.py"],
   "explorer.fileNesting.enabled": true,
   "explorer.fileNesting.patterns": {
     "package.json": "package-lock.json, yarn.lock, .eslintrc.js, tsconfig.json, .prettierrc, .editorconfig",

docs/docs/contributors/developers-guide/starting-dev-server.md

@@ -114,3 +114,24 @@ docker-dev           🐳 Build and Start Docker Development Stack (currently no
 docker-prod          🐳 Build and Start Docker Production Stack
 
 ```
+## Internationalization
+### Frontend
+We use vue-i18n package for internationalization. Translations are stored in json format located in [frontend/lang/messages](https://github.com/hay-kot/mealie/tree/mealie-next/frontend/lang/messages).
+### Backend
+Translations are stored in json format located in [mealie/lang/messages](https://github.com/hay-kot/mealie/tree/mealie-next/mealie/lang/messages).
+
+### Quick frontend localization with VS Code
+[i18n Ally for VScode](https://marketplace.visualstudio.com/items?itemName=lokalise.i18n-ally) is helpful for generating new strings to translate using Code Actions. It also has a nice feature, which shows translations in-place when editing code.
+
+A few settings must be tweaked to make the most of its features. Some settings are stored on project level, but most of them have to be set manually in your workspace or user settings.\
+We've found that the following settings work best:
+
+```
+  "i18n-ally.enabledFrameworks": ["vue"],
+  "i18n-ally.extract.autoDetect": true,
+  "i18n-ally.dirStructure": "auto",
+  "i18n-ally.extract.targetPickingStrategy": "global-previous",
+  "i18n-ally.displayLanguage": "en-US",
+  "i18n-ally.keystyle": "nested",
+  "i18n-ally.sourceLanguage": "en-US",
+```

docs/docs/contributors/translating.md

@@ -14,8 +14,3 @@ Once your language is translated on Crowdin, we need to manually add it in Meali
 There can be several reasons:
 - The text you're looking for is outdated: someone has already changed it or it will be removed/changed in the next release.
 - It is possible some texts are not translatable (yet) for technical reasons. If you spot one, please reach out to us on [Discord](https://discord.gg/QuStdQGSGK) or raise an issue on GitHub.
-
-## Technical information
-We use vue-i18n package for internationalization. Translations are stored in json format located in [frontend/src/locales/messages](https://github.com/hay-kot/mealie/tree/master/frontend/src/locales/messages).
-
-[i18n Ally for VScode](https://marketplace.visualstudio.com/items?itemName=lokalise.i18n-ally) is helpful for generating new strings to translate. It also has a nice feature, which shows translations in-place when editing code.